jquery - 在鼠标悬停时在图像中心显示图标

Question

几天来，我一直在尝试在我的 159 x 149 图片的中心显示一个搜索图标鼠标悬停。但我总是遇到一些问题，现在我不明白发生了什么。已经尝试过此练习的任何人都可以提供一些帮助吗？谢谢!

HTML:

<article class="posts">
    <div style="float:left; position:relative;position: relative; clear: both; background-size:contain; background-image: url('imagens/image1.png'); width: 159px; height: 149px; padding-right: 10px; background-repeat: no-repeat;">
        <a href="#" class="search_icon_hover" style="display: none; margin-left: 0px; background-color:#666; opacity:0.9; transition: 0.3s; position:absolute; top:0; bottom: 0; left:0; right: 0;">
            <span id="icon_search"><I class ="fa fa-search-plus" > </I>Hover</span>
        </a>
    </div>
</article>

jQuery:

$(document).ready(function(){

    $(".posts").mouseenter(function(e){
        console.log('enter');
        $((e.toElement)).find('a.search_icon_hover').show();
    }).mouseleave(function(elemento) {
        $((e.toElement)).find('a.search_icon_hover').hide();
    });;
});

Answer 1

嗯...好吧，问题主要在于您对 e.toElement 的使用。如果您尝试运行此代码:

$(".posts").mouseenter(function(e){
    console.log(e.toElement);
});

您会发现 e.toElement 实际上返回的是 undefined。我们不使用这种方法，而是使用 this 关键字。 (这里是 some information，如果你想知道更多的话。)因此你的 JavaScript 将是:

$(document).ready(function(){
    $(".posts").mouseenter(function(){
        $(this).find('a.search_icon_hover').show();
    }).mouseleave(function() {
        $(this).find('a.search_icon_hover').hide();
    });
});

这是一个 JSFiddle演示正在运行的脚本。我认为它会产生您正在寻找的行为。 这是不是很棒？希望这有帮助!如果您有任何问题，请告诉我。

编辑 作为对您的附加评论的回应(我在最初的回答中一定忽略了这一点)，我添加了更多代码，使悬停文本居中。为此，我向 #icon_search 添加了一些新的 CSS，因此 HTML 如下所示:

<span id="icon_search" style="display:block; position:relative; top:50%; margin-top:-8px;">
    <I class ="fa fa-search-plus" > </I>Hover
</span>

使用此 CSS，悬停文本将保留在容器的中心，而不管容器的大小。请注意，对于多行内容，您需要相应地增加负 margin-top。

现在，对于淡入/淡出，您实际上不能使用 CSS 转换来为 display 属性设置动画，因此我们需要一种不同的方法。我觉得将淡入淡出完全移至 jQuery 会更容易(并且跨浏览器更健壮)。所以我从你的内联样式中删除了 transition:0.3s，并将 JavaScript 代码更改为:

$(document).ready(function () {
    $(".posts").mouseenter(function () {
        $(this).find('a.search_icon_hover').fadeIn(300);
    }).mouseleave(function () {
        $(this).find('a.search_icon_hover').fadeOut(300);
    });
});

这是一个 new JSFiddle向您展示这实现了什么。如果您想做任何其他事情，请告诉我。