Disable CSS click event (click through an element), maintaining CSS hover event of that element

Question

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

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

Is it possible to allow the user to click through the div to play the video without turning off the hover effect on the div? I cannot make the div smaller.

I'm looking for something similar to pointer-events:none but which maintains the hover event for the div element. Is there a javascript solution perhaps?

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>

If you are displaying your div exactly over the video, then none of the mouse events will filter down to that video without you explicitly doing so in javascript code. Or am I missing something? — Aleks G
– Aleks G, Commented Nov 2, 2012 at 17:06
The point is that applying CSS property pointer-events:none on the div will allow clicks through it but will also disable the hover effect. Is there any middle ground here? I want to disable the click but enable the hover. — cronoklee
– cronoklee, Commented Nov 2, 2012 at 17:10
You show links in the div which is visible while hovering? But you want to click through the div (with the links) and interact with the video? ...why is the div there? — David Thomas
– David Thomas, Commented Nov 2, 2012 at 21:42
@ David - Maybe he wants to have links appear or ads appear over the video? Dunno...just a thought. I assume this is what he is after jsfiddle.net/videsignz/LGYmB — VIDesignz
– VIDesignz, Commented Nov 2, 2012 at 21:49
Yes the div is there to contain the links and display them on hover. On some pages on my site, the video does not exist so the div is used to trigger the hover effect. — cronoklee
– cronoklee, Commented Nov 5, 2012 at 11:59

VIDesignz · Accepted Answer · 2012-11-02 21:38:42Z

2

Here you go...

Here is a Working Fiddle

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);
});

answered Nov 2, 2012 at 21:38

VIDesignz

4,8133 gold badges30 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

cronoklee Over a year ago

Interesting approach - thanks a lot @VIDesignz. I'm not using jquery for this project but I've modified your demo to work in pure CSS: jsfiddle.net/EJXEm

VIDesignz Over a year ago

@cronoklee Would you mind showing your css? curious to see :)

cronoklee Over a year ago

I linked a fork of your fiddle above (that is a bizarre sentence!). Is it not working?

VIDesignz Over a year ago

@cronoklee dude, first off, leave forking my fiddle to me (what?!?!), secondly, I have no Idea how I missed the link...what a dummy!! Looks good man!

Collectives™ on Stack Overflow

Disable CSS click event (click through an element), maintaining CSS hover event of that element

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related