将鼠标悬停在CSS不透明度同级子元素中

Question

I'm trying to make images semi-transparent on hover, and display a text on them.

I've implemented a pure CSS solution, but there is a problem with it : when I hover the image, the text (a link) shows, but if I get my mouse over this link, it looses the hover on the image, and starts blinking because it is caught on a loop of hover, "unhover".

An example will be much more explicit so here is my code : http://jsfiddle.net/zm2Jt/3/

CSS part :

.fadeImg {
   opacity: 1;
}
.fadeImg~.hoverDisplay {
    display: none;
}
.fadeImg:hover {
    opacity: 0.5;
}
.fadeImg:hover~.hoverDisplay {
    display: block;
}

The text is placed over the image using position absolute. As the link is child of .hoverDisplay, the span that is absolutely positionned, I think I can't do much with CSS to prevent the hovering on the link.

I know I could add JS for a workaround (adding a class when I enter the image, removing when I leave it), but I would rather go with a CSS although I suspect it's not possible.

Thanks for your answers :-)

Answer 1

How about chopping down your CSS to a great extent?

Demo

Demo 2 ( a tag inside the box, you can tweak around)

.formContainer .teamImg {
    float: left;
    margin-left: 20px;
    position: relative;
    width: 300px;
}

.teamImg span {
    opacity: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    background: rgba(255,255,255,.5);
    top: 0;
    left: 0;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

.teamImg:hover span {
    opacity: 1;
}

Am just positioning span tag absolute to the container element, also am transitioning the opacity here but am also using rgba() to make the element background slightly opaque.

---

Made from scratch, simplifying the idea

Demo 3

<div>
    <img src="URL_HERE" />
    <span>Write anything here</span>
</div>


div {
    float: left;
    border: 1px solid #aaa;
    position: relative;
}

div span {
    position: absolute;
    height: 100%;
    width: 100%;
    background: rgba(255,255,255,.5);
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}

div:hover span {
    opacity: 1;    
}

Answer 2

Add pointer-events: none; on your text.
This way, it shouldn't affect your hover.

For more informations on pointer-events:
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events?redirectlocale=en-US&redirectslug=CSS%2Fpointer-events

Answer 3

A little adjustment on the hover states: http://jsfiddle.net/zm2Jt/8/

.fadeImg:hover, .teamImg:hover .fadeImg {
    opacity: 0.5;
}
.fadeImg:hover~.hoverDisplay, .teamImg:hover .hoverDisplay {
    display: block;
}