Displaying a custom button over a video on mouse hover

StackOverflow https://stackoverflow.com/questions/23672321

  •  23-07-2023
  •  | 
  •  

题

I have a intro video which i want to show as the first page of a website, and now there has to be a button which will take the user to the main content. I want to position it over the video in the center when user hovers over the video.

THis is what i have tried : 

<html>
<head>
<style>

#text{
    z-index:9999;
    position: absolute;
    top:100px;
    left:100px;
}

#video{
position:relative;
margin:0 auto;
left:0px;
right:0px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
</head>
<body>
    <div id="text">
        THis is a test text
    </div>
    <div id="video">
        <embed src="videos/abc.mp4" height="600" width="800">
    </div>

<script>
    $(document).ready(function(){
        $("#video").mouseenter(function(){

        $("#text").show();

        });

        $("#video").mouseleave(function(){

        $("#text").hide();

        });
    });
</script>
</body>
</html>
有帮助吗？

解决方案

You don't need javascript at all for this: http://jsbin.com/fomiseze/1/

.close {
    display: none;
}

#video:hover .close {
    display: block;
}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top