CSS Making a div change opacity, lightness when hovered over

Question

My objective is to create an area that displays clickable text content, has hover that changes the whole area, and does NOT spaz out when the whole div or text is rolled over. I want to do this with css.

For example, I want a div, say 500 x 500 px, inside of this div are p's and a's that need to be clickable. It works normally. Something like:

<div style="width:500px; height:500px;">
    <p> xtext <a>xlink</a> </p> 
    <p> xtext <a>xlink</a> </p>
</div>

And then, I want a div on top, that has a rollover (hover) function that covers the whole first div, hazing out the whole div with a transparent color, until rolled over, when the transparency is set to 0.0, and appears gone. But I want the links from the first div to be clickable (to do this, I give this second div pointer-events:none). I place this code* inside the first div, so in total looks like this:

<div style="width:500px; height:500px;">
*<div class="divhover" style="width:500px; height:500px; position:absolute;">
</div>
    <p> xtext <a>xlink</a> </p> 
    <p> xtext <a>xlink</a> </p>
</div>

Styling with css class:

div.divhover { 
    background-color: hsla(0, 100%, 100%, 0.5); }
div.divhover:hover {
    background-color: hsla(0, 100%, 100%, 0.0); 
    pointer-events: none; }

Without pointer-events:none, this works like a normal hover function: if your mouse is not on the div area, there is a white layer of 0.5 transparency. If your mouse is on it, the transparency is 0.0 and looks as if it is uncovered. This, however, does not allow the text and links elements to be clicked.

With pointer-events:none, the text and links are clickable but it results in the hover to deactivate when a cursor is over the p or a elements. This makes the whole div spaz out and blink if the cursor moves around, and rapid blinking if the cursor is hovering on a link! I don't want this!

I hope all you with much more css/html know-how can help me (I don't know much). Before getting this far, I tried setting z-index:-1 on .divhover:hover to have the text and links in the first div be clickable. I also tried using position:absolute moving the second div off the page (left:2000px). These both resulted in the same situation, as they are only different ways to do the same thing with pointer-events.

Here is a jsfiddle where you can see the blinking:

http://jsfiddle.net/6wU8X/

Although it's not apparent here, if you take out pointer-events:none, the links and text would not be clickable.

Answer 1

The flicker you're seeing is caused by setting pointer-events:none; on the hover property.

You're telling the browser to ignore all pointer events, even the ones that trigger hover states. So the moment you activate the hover css you deactivate it, causing the flicker (it's updated by mouse pixel movement).

CSS:

.divhover:hover {
  background-color: hsla(0, 100%, 100%, 0.0); 
}

Update: If your ultimate goal is to simply grey out the text until you hover over it, then you might try this:

Working Demo

HTML:

<div class="hover">    
    <p> xtext <a>xlink</a> </p> 
    <p> xtext <a>xlink</a> </p>
</div>

CSS:

.hover {
    width:500px; 
    height:500px;
    background-color:#ccc; 
    color:#333;
    opacity: .5;
}

.hover:hover{
    opacity: 1;
}

I think you may be going about this effect in an odd way. You can add a hover state on the containing element and toggle the opacity.

Answer 2

I can't come up with a way to do this with CSS. If you're open to JavaScript and jQuery, here is a fall back if no one comes up with a CSS solution.

Add a class to the parent div:

<div class="parent" style="width:500px; height:500px; background-color:#ccc; color:#333;z-index:10">

<div class="divhover" style="width:500px; height:500px; position:absolute;">
</div>

    <p> xtext <a>xlink</a> </p> 
    <p> xtext <a>xlink</a> </p>
</div>

Include jquery and add the following script:

 $(document).ready(function(){

    $(".divhover").mouseover(function(){
        console.log("Over");
        $(this).hide();
        }
    );

    $(".parent").mouseleave(function(){
        console.log("out");
       $(".divhover").show(); 
    });

});

See it in action here: http://jsfiddle.net/6wU8X/2/

Hopefully some one comes up with a CSS solution though!