All geek questions in one place

Disable CSS click event (click on an element), supporting the CSS freeze event of this element

I have an iframe iframe embedded in a page with a transparent div placed exactly on top of it.

I have links in a div that I use CSS on: hover over the mouse to make it visible only while the mouse is over the video.

Can I allow the user to click the div to play the video without disabling the hover effect on the div? I can not make the div smaller.

I am looking for something similar to pointer-events:none , but which supports the hover event for a div element. Perhaps there is a javascript solution?

Code Demo:

 <!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
source share
1 answer

Here you go ...

Here is a working script

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); });
+2
source

Source: https://habr.com/ru/post/1443695/

More articles:


All Articles