Как добиться FadeIn при наведении курсора через JQuery?

Question

Как добиться FadeIn при наведении курсора через JQuery?

0

Я пытаюсь сделать aa span на mouseOver или наведите курсор в JQuery. Я бы хотел, чтобы это произошло, когда я box1 курсор на 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');
    });

});

justLearning 24 сен. 2013, в 02:43

Источник

Теги:

jquery

html

css

2 ответа

1

Вы нацеливаете $ ('# boxt1') на свой jQuery вместо $ ('# box1'), который может вызвать проблемы, и я не уверен, почему вы запускаете событие mouseover. Это должно работать:

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

Tim Sheehan 23 сен. 2013, в 22:15

Ещё вопросы

PSL · Accepted Answer · 2013-09-23T23-08-00.000Z

У вас есть пара вопросов:

Вы не используете fadeIn, вместо этого вы используете mouseOver, который является событием.
Ваш селектор неверен.
У вас есть отрицательный индекс z на box1, поэтому вы никогда не сможете его зависнуть, так как его родитель имеет более высокий индекс z, который вы в конечном итоге наведите на него.
Также обратите внимание, что по умолчанию div является элементом уровня блока, поэтому он будет принимать всю ширину контейнера, поэтому, даже если вы перейдете в правую часть div, он все еще находится на div, поэтому ваш mouseleave не запускается. Вместо этого вы можете float/сделать его inline-block div, чтобы он учитывал только указанное измерение.

Пытаться

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

});

скрипка

Спасибо ... Я верю, что это будет работать.