0

我有一个我想在标题 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();
 });
4

2 回答 2

0

首先添加jquery你的小提琴。其次，您可以使用 css 本身实现悬停效果，除了第二件事之外，您不需要 jquery。添加一个包装器来包装您的 img 和覆盖，并为其添加一些 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
});

演示

于 2013-10-09T16:43:11.890 回答
0

你的 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/

于 2013-10-09T16:41:50.657 回答