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来演示正在运行的脚本。我认为这会产生你正在寻求的行为。不是this很棒吗？希望这有帮助！如果您有任何问题，请告诉我。

编辑为了回应您的其他评论（我在最初的答案中一定忽略了这一点），我添加了更多代码，因此悬停文字居中。为此，我向#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来向您展示这实现了什么。如果您正在寻找其他任何事情，请告诉我。

Answer 2

选中此LIVE

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="background-color:#666; opacity:0.9; transition: 0.3s; position:absolute; top:0; bottom: 0; left:0; right: 0;text-align:center;vertical-align: middle;padding-top:62px;">
             <span id="icon_search">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(e) {
        $((e.toElement)).find('a.search_icon_hover').hide();
    });;
});

在鼠标悬停上显示图像中心的图标

2 个答案:

HTML

JQuery的