4

透明なdivがその上に正確に配置されたページに埋め込まれたYouTube iframeがあります。

CSS :hover を使用して、マウスがビデオの上にあるときにのみ表示されるリンクを div に持っています。

div のホバー効果をオフにせずに、ユーザーが div をクリックしてビデオを再生できるようにすることは可能ですか? divを小さくすることはできません。

pointer-events:noneに似ているが、div要素のホバーイベントを維持するものを探しています。おそらくjavascriptソリューションはありますか？

コードのデモ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Video test</title>
<style>
#storymenu{position:absolute; width:515px; height:386px;}
#storymenu a{display:none; margin-left:10px; margin-top:20px; padding:5px; background:#FFF;}
#storymenu:hover a{display:inline-block}
</style>
</head>

<body>
<div id="storymenu">
<a href="#" onclick="alert('next');return(false);"><span>Next Story</span> &gt;</a>
<a href="#" onclick="alert('prev');return(false);">&lt; <span>Prev Story</span></a>
</div>
<iframe width="515" height="386" src="http://www.youtube-nocookie.com/embed/5It4y8834Zd" frameborder="0" allowfullscreen></iframe>
</body>
</html>
4

1 に答える 1

2

どうぞ...

ここにワーキングフィドルがあります

CSS

#video {
width:500px;
height:200px;
background-color:#333333;
display:block;
position:absolute;
left:0px; top:0px;
z-index:1;
}

#video a {
color:#ffffff;
}

#overlay{
display:none;
position:absolute;
left:30px; top:50px;
z-index:5;
}

#overlay a {
color:orange;
}

HTML

<div id='holder'>
<div id='video'><a href=''>Link</a></div>
<div id='overlay'><a href=''>Overlay Link</a></div>
</div>

JQuery

$('#holder').on('mouseenter', function(){
$('#overlay').fadeIn(250);
});

$('#holder').on('mouseleave', function(){
$('#overlay').fadeOut(250);
});
于 2012-11-02T21:38:42.490 に答える