Question

您好我使用了我在网上找到的教程来帮助我制作一张褪色的图像当用户将鼠标悬停在它上面时..我试图在此处添加标题图像，但现在遇到一个问题，这意味着用户将鼠标悬停在在它的顶部，图像再次消失..我真的想要得到它要做的就是让整个东西在悬停时淡出颜色。

这是JSFiddle http://jsfiddle.net/xxfairydragonxx/RpcRe/

如果有人能看到这样做的话，我会非常感激！

这是我的代码：

HTML

<div id="part2">
    <div class="fadehover">
    <div class="center">
        <h4>Independant Living</h4>
    </div><a href="#"><img alt="" class="a" src=
    "http://coffeemachines4u.co.uk/HarmonyHomes/Images/IndependantLiving.jpg"></a>
    <img alt="Harmony Homes Transitions" class="b" src=
    "http://coffeemachines4u.co.uk/HarmonyHomes/Images/IndependantLivingColor.jpg"></div>
</div>

的jQuery

$(document).ready(function () {
    $("img.a").hover(

    function () {
        $(this).stop().animate({
            "opacity": "0"
        }, "slow");
    },

    function () {
        $(this).stop().animate({
            "opacity": "1"
        }, "slow");
    });

});

Answer 1

如果我很清楚正在尝试做什么：

您可以添加：

 $(".center").hover(
function() {
$('img.a').stop().animate({"opacity": "0"}, "slow");
},
function() {
$('img.a').stop().animate({"opacity": "1"}, "slow");
});

DEMO

Answer 2

将悬停效果放在fadecenter上

$(document).ready(function(){
    $(".fadehover").hover( function() {
        $(this).find('img.a').stop().animate({"opacity": "0"}, "slow");
    },
    function() {
        $(this).find('img.a').stop().animate({"opacity": "1"}, "slow");
    });
});

http://jsfiddle.net/RpcRe/4/

Answer 3

将您的hover事件添加到整个.fadehover元素（其中包含标题和图片），然后使用淡入淡出效果将图片定位在内部：

$(document).ready(function () {
    $(".fadehover").hover(

    function () {
        $('img.a',this).stop().animate({
            "opacity": "0"
        }, "slow");
    },

    function () {
        $('img.a',this).stop().animate({
            "opacity": "1"
        }, "slow");
    });

});

您还需要稍微清理一下HTML：

<div id="part2">
    <div class="fadehover">
        <div class="center">
             <h4>Independent Living</h4>
        </div>

        <a href="#"><img 
           src="http://coffeemachines4u.co.uk/HarmonyHomes/Images/IndependantLiving.jpg" 
               alt="" class="a"><img 
           src="http://coffeemachines4u.co.uk/HarmonyHomes/Images/IndependantLivingColor.jpg" 
               alt="Harmony Homes Transitions" class="b"></a>
    </div> <!-- .fadehover -->
</div> <!-- #part2 -->

http://jsfiddle.net/mblase75/eE5MC/

（或者，如果您热衷于学习语义HTML，请使用figure and figcaption：http://jsfiddle.net/mblase75/eE5MC/1/）

Answer 4

我认为最好将每个块放在容器中

让容器触发它

<div class="imgblock">
img_block_here
</div>

... jquery的

$(document).ready(function(){
$(".imgblock").hover(
function() {
$("img.a").stop().animate({"opacity": "0"}, "slow");
},
function() {
$("img.a").stop().animate({"opacity": "1"}, "slow");
});

});

查看更新的小提琴http://jsfiddle.net/RpcRe/2/

翻滚效果

4 个答案: