0

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

JS小提琴

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;}

查询：

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

});
4

2 回答 2

4

你有几个问题：

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

尝试

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

});

小提琴

于 2013-09-24T00:30:09.430 回答
1

您在 jQuery 中定位 $('#boxt1') 而不是 $('#box1') 可能会导致问题，我不确定您为什么触发鼠标悬停事件。这应该有效：

$(document).ready(function(){
    $('#box1').hover(
        function(){
            $('#sale').stop().fadeIn();
        }, 
        function(){
            $('#sale').stop().fadeOut();
        }
    );
});
于 2013-09-24T00:32:01.590 回答