Javascript 鼠标输入/将img置于fadeIn/Out text div不工作

我有一个图像，我想淡入字幕区。当鼠标进入字幕区时，字幕区应直接淡入图像上方，当鼠标离开时淡出

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

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

FiddleJS：

HTML:

JS:

---

您的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>

---

首先，在小提琴中添加

jquery

。第二，你可以用css实现悬停效果，除了第二件事，你不需要jquery。添加一个包装器来包装您的img和覆盖，只需向其中添加一些css规则

CSS:

HTML:

---

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

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

$('.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();
 });

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

$('.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();
 });

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

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

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