mouseenter/leave img to fadeIn/Out text div 不起作用答案

【问题标题】：mouseenter/leave img to fadeIn/Out text div not workingmouseenter/leave img to fadeIn/Out text div 不起作用
【发布时间】：2013-10-10 05:44:49
【问题描述】：

我想要在标题 div 中淡入淡出图像。当鼠标进入 div 时，标题 div 应该直接在图像上淡入淡出，当鼠标离开时应该淡出。

其次，我想添加一个 click toggleClass 函数来选择和取消选择图像。选择图像后，标题应保持显示/显示。当通过单击取消选择图像时，标题应淡出。

底线：1）鼠标进入/离开以淡入/淡出字幕2）单击以切换选择类以保持字幕显示或取消选择以隐藏。

FiddleJS：http://jsfiddle.net/jhyqt5/cBsqN/

HTML：

 <div class="caption">Into the Night</div>

<img src="https://scontent-a-pao.xx.fbcdn.net/hphotos-frc1/189612_10100244250167513_7332862_n.jpg" class="img-circle">
</div>

CSS：

    .img-circle{
    border-radius: 50%; height: 140px; width: 140px;
}
.caption{
    background-color: black; opacity: .7;
    text-align: center; line-height: 120px; color: white;
    position: absolute; display: none;
    border-radius: 50%; height: 140px; width: 140px;
}

JS：

$('.caption').mouseenter(function(){
    var image = $(this).find('img'),
        caption = $(this).find('div');
    caption.height(image.height());
    caption.width(image.width());
    caption.fadeIn();
}).mouseleave(function(){
    var image = $(this).find('img'),
        caption = $(this).find('div');
    caption.height(image.height());
    caption.width(image.width());
    caption.fadeOut();
 });

【问题讨论】：

标签： javascript html css

【解决方案1】：

首先在你的小提琴中添加jquery。其次，您可以使用 css 本身实现悬停效果，除了第二件事之外，您不需要 jquery。添加一个包装器来包装你的 img 和 overlay，然后添加一些 css 规则。

CSS：

.wrapper{
    position:relative;
}
.caption {
    background-color: black;
    opacity: .7;
    text-align: center;
    line-height: 120px;
    color: white;
    position: absolute;
    display: none;
    border-radius: 50%;
    width:140px;
    height:140px;
}
.wrapper:hover .caption{ /*Show it when hovered*/
     display: block;
}
.wrapper.active .caption{ /*Show it always when parent has class active*/
     display: block;
}

HTML：

<div class="wrapper">
    <div class="caption">Into the Night</div>
    <img src="https://scontent-a-pao.xx.fbcdn.net/hphotos-frc1/189612_10100244250167513_7332862_n.jpg" class="img-circle">
</div>

JS：

$('.wrapper').on('click', function () {
    $(this).toggleClass('active'); //toggle the class to add or remove each click
});

Demo

【讨论】：

这太棒了！感谢您的演示。实际上我一周前才开始编码，说“将jquery添加到您的小提琴”是什么意思？我发送的小提琴链接实际上也是我的第一次尝试，请解释。谢谢

【解决方案2】：

你的 HTML 格式不正确，试试这个淡化效果

<div class="image">
<div class="caption">Into the Night</div>

<img src="https://scontent-a-pao.xx.fbcdn.net/hphotos-frc1/189612_10100244250167513_7332862_n.jpg" class="img-circle">
</div>

Javascript

$('.image').mouseenter(function(){
    var image = $(this).find('img'),
        caption = $(this).find('div');
    caption.height(image.height());
    caption.width(image.width());
    caption.fadeIn();
}).mouseleave(function(){
    var image = $(this).find('img'),
        caption = $(this).find('div');
    caption.height(image.height());
    caption.width(image.width());
    caption.fadeOut();
 });

http://jsfiddle.net/ZDWzm/1/

【讨论】：