Question

问题在于，当我将MouseHover覆盖在图像上工作正常但如果我将鼠标悬停在标题上，则会闪烁。示例：http://www.adminvps.com.ar/trabajos/sofi_v/pintura.html

Mi代码是：

＆＃13;

$(document).ready(function () {
    $('.item a img').hover(function () {
    	id = '.' + $(this).attr("id");
        $(this).stop().animate({
            opacity: .2
        }, 200);
        $(id).removeClass('hide');
    }, function () {
        $(this).stop().animate({
            opacity: 1
        }, 500);
        $('.text').addClass('hide');
    });
});

＆＃13;

.text {
    z-index: 1;
    position: absolute;
    color: #000000;
    margin: 30px 0px 0px 30px;
    font-weight: bold;
    font-size: 13px;
    line-height: 18px;
}

.text span {
    color: #808080;
}

.hide {
    display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="item">
	<div class="id1 text hide">Title <br /> texto</div>
	<a href="#"><img id="id1" src="http://www.adminvps.com.ar/trabajos/sofi_v/example.jpg" alt="" style="max-width: 500px;" /></a>
</div>
<br />
<div class="item">
	<div class="id2 text hide">Title <br /> texto</div>
	<a href="#"><img id="id2" src="http://www.adminvps.com.ar/trabajos/sofi_v/example.jpg" alt="" style="max-width: 500px;" /></a>
</div>

＆＃13;

知道如何移除闪光灯吗？感谢

Answer 1

这也可以通过使用CSS3 transitions（纯CSS，无JS）

来实现

这是我刚从您的代码中编写的fiddle，其中包含一个工作示例。

这些是添加到其中的行：

Poco::Buffer

我不得不指向img而不是整个div（.item img { -webkit-transition: opacity 500ms; transition: opacity 500ms; opacity: 1; } .item:hover img { opacity: 0.2; -webkit-transition: opacity 200ms; transition: opacity 200ms; } .item:hover .hide { display: block; }）因为文本的不透明度也越来越低。

希望这会对你有所帮助。

Answer 2

当您的鼠标从img标记转到div标记时，它会触发mouseout事件（您在悬停中使用的第二个函数）。

如果新元素是特定的div，你可以在这个函数里面检查 - 如果是这样的话就什么都不做。

这段代码可以解决问题：

 $(document).ready(function () {
    $('.item a img').hover(function (e) {
        id = '.' + $(this).attr("id");
        $(this).stop().animate({
            opacity: .2
        }, 200);
        $(id).removeClass('hide');
    }, function (e) {
        if (e.toElement == $(this).parents('.item').find('div')[0]) {
            return;
        }
        $(this).stop().animate({
            opacity: 1
        }, 500);
        $('.text').addClass('hide');
    });
    $('.item div').hover(function(e) {
        return false;
    }, function(e) {
        return false;
    });
});

注意我将e变量（它是Event var）添加到函数中，以便我可以在里面使用它。

Answer 3

这是因为标题位于您正在设置事件的图像之外。

一种解决方案是将标题div放在a元素中，并将事件分配给a而不是img，如下所示：

<div class="item">
    <a href="#">
        <div class="id1 text hide">Title <br /> texto</div>
        <img id="id1" src="http://www.adminvps.com.ar/trabajos/sofi_v/example.jpg" alt="" style="max-width: 500px;" />
    </a>
</div>

并且

$('.item a')

而不是

$('.item a img')

此外，a元素的宽度和高度至少应与img元素相同，因此可以正确触发事件。这可以通过将其显示为块来轻松实现：

a {
    display: block;
}

希望它有所帮助。

Flash文字对图像的影响

3 个答案: