Question

我正在尝试在mouseOver上显示一个范围或悬停在JQuery中。我想要发生的是，当我将鼠标悬停在box1上时，"sale"应该出现。它不起作用，有人可以帮忙吗？

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是块级元素，因此它将占用容器的整个宽度，所以即使你转到div的右侧，它仍然在div上，所以你的mouseleave不会不会被触发。您可以改为float /使其成为inline-block div，使其仅采用指定的维度。

尝试

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

});

<强> Fiddle

Answer 2

你的目标是在jQuery而不是$（'＃box1'）中定位$（'＃boxt1'），这可能会导致问题，我不确定你为什么要触发鼠标悬停事件。这应该有效：

$(document).ready(function(){
    $('#box1').hover(
        function(){
            $('#sale').stop().fadeIn();
        }, 
        function(){
            $('#sale').stop().fadeOut();
        }
    );
});

如何通过JQuery悬停实现fadeIn？

2 个答案: