元素不应该褪色，而是

Question

Just like the title says, I have an element that shouldn't be fading but is. The element in question is text on top of an image that fades when you move your mouse over it.

HTML:

<div id="image-wrapper">
<ul id="team-members">
    <li class="tile-wrapper fade">
        <div class="tile">
            <img src="http://placehold.it/158x210" />
             <h3 class="bio bio-header" style="display:none;">Header</h3>
            <p class="bio bio-footer" style="display:none;">Information</p>
        </div>
    </li>
</ul>

jQuery

$(document).ready(function () {
$('.fade').mouseenter(function (ev) {
    $(this).fadeTo(150, 0.5);
    $(this).find('img').siblings().fadeIn(150);
}).mouseleave(function () {
    $(this).fadeTo(150, 1);
    $(this).find('img').siblings().fadeOut(150);
});
});

Fiddle: https://jsfiddle.net/oLckb6h3/4/

Answer 1

Fade the img rather than the .fade element...

 $(document).ready(function() { $('.fade').mouseenter(function(ev) { $(this).find('img').fadeTo(150, 0.5).siblings().fadeIn(150); }).mouseleave(function() { $(this).find('img').fadeTo(150, 1).siblings().fadeOut(150); }); }); 

 ul { list-style-type:none; } .bio { padding:15px; } .bio-header { margin-top:-150px; } .tile { width:158px; height:210px; border: 1px solid black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="image-wrapper" > <ul id="team-members"> <li class="tile-wrapper fade"> <div class="tile"> <img src="http://placehold.it/158x210"/> <h3 class="bio bio-header" style="display:none;">Header</h3> <p class="bio bio-footer" style="display:none;">Information</p> </div> </li> </ul> </div> 

Answer 2

A suggestion:

HTML

<div id="image-wrapper" >
    <ul id="team-members">
        <li class="tile-wrapper fade">
            <div class="tile">
                <div class="doFade">&nbsp;</div>
                <div class="info">
                    <h3 class="bio bio-header">Header</h3>
                    <p class="bio bio-footer">Information</p>
                </div>
                <img src="http://placehold.it/158x210"/>
            </div>
        </li>
    </ul>
</div>

CSS

ul {
    list-style-type:none;
}

.bio {
    padding:15px;
}

.tile {
    width:158px;
    height:210px;
    border: 1px solid black;
    position: relative;
}

.doFade {
    position: absolute;
    left: 0;
    background: #fff;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: 0.5;
    display: none;
}

.info {
    position: absolute;
    left: 0;
    background: transparent;
    top: 0;
    right: 0;
    bottom: 0;
    display: none;
}

jQuery

$(document).ready(function() {
    $('.fade').mouseenter(function(ev) {
        $('.doFade', this).add( $('.info', this) ).fadeIn(150);
    }).mouseleave(function() {
        $('.doFade', this).add( $('.info', this) ).fadeOut(150);
    });
});

DEMO