CSS Create div change transparency, ease on hover

Question

My goal is to create an area that displays interactive text content, has a hang that changes the entire area and DOES NOT let go when the entire div or text is flipped. I want to do this with css.

For example, I want a div, say 500 x 500 px, inside this div to be p and a, which should be clickable. It is working fine. Sort of:

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

And then, I want the div on top, which has a hover function that spans the entire first div, subtracting the entire div with transparent color, until it flips over when the transparency is set to 0.0, and seems to be gone. But I want the links from the first div to be interactive (for this I give the second div pointer-events:none). I put this code * in the first div, so overall it 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>

Style 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 with 0.5 transparency. If your mouse is turned on, the transparency is 0.0 and it looks like it is not detected. This, however, does not allow click elements of text and links.

pointer-events:none , , , p . , div spaz , , ! !

, , - css/html, ( ). , z-index:-1 .divhover:hover, div . position:absolute, div (left:2000px). , pointer-events.

jsfiddle, :

http://jsfiddle.net/6wU8X/

, pointer-events:none, .

Answer 1

, , pointer-events:none; hover.

, , . , cover hover, , ( ).

CSS

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

: - , , :

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

, . .

Answer 2

CSS. JavaScript jQuery, , CSS.

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>

jquery script:

 $(document).ready(function(){

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

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

});

: http://jsfiddle.net/6wU8X/2/

, - CSS!