jquery - 如何通过 JQuery 实现悬停时的淡入效果？

Question

我正在尝试使跨度出现在 mouseOver 上或悬停在 JQuery 中。我希望发生的是，当我将鼠标悬停在 box1 上时，应该会出现 “sale”。它不起作用，有人可以帮忙吗？

JS Fiddle

HTML:

<div id="columnOne">
        <span id="sale">for sale</span>

       <div id="box1"></div>

        <div id="box2"></div>
    </div>

CSS:

#sale{width: 85px;
    margin: 0 0 -45px 15px;
    padding: 5px;
    position: relative;
    display: none;
    font-size: 14pt;
    font-family: 'oxygen', serif;
    background-color: #000;
    color: #fff;
    text-transform: uppercase;

    -webkit-border-radius: 5px 5px;
    -moz-border-radius: 5px 5px;
    border-radius: 5px 5px;}

#box1{width: 240px;
    height: 220px;
    margin: 10px;
    position: relative;
    display: block;
    background-color: #4174a8;
    background-image: url(../images/crown.png);
    background-repeat: no-repeat;
    background-position: center;
    z-index: -1;}

JQuery:

$(document).ready(function(){
    $('#boxt1').hover(function(){
        $('#sale').mouseOver('fast');
    });

});

Answer 1

你有几个问题:

• 您没有使用 fadeIn，而是使用了 mouseOver，这是一个事件。
• 您的选择器不正确。
• 你在 box1 上有一个负的 z-index，所以你永远不会让它悬停在上面，因为它的父级有更高的 z-index，你最终会悬停在它上面。
• 另请注意，默认情况下 div 是 block 级元素，因此它将占据容器的整个宽度，因此即使您转到 div 的右侧，它仍然在 div 上，所以你的 mouseleave 不会被触发。您可以改为 float/使其 inline-block div 以使其仅采用指定的尺寸。

尝试

$(document).ready(function () {
    $('#columnOne').hover(function () {
        $('#sale').fadeToggle('fast');
    });

});

Fiddle