Question

就像标题所说，我有一个不应该褪色的元素，但是。有问题的元素是图像顶部的文本，当您将鼠标移到图像上时会消失。

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

小提琴：https://jsfiddle.net/oLckb6h3/4/

Answer 1

淡化img而不是.fade元素......

$(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

建议：

<强> 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

元素不应该褪色，但是

2 个答案: