jquery показать элемент на mouseenter

Question

jquery показать элемент на mouseenter

0

Как говорится в названии, я хочу, чтобы элемент исчезал, когда мышь нависает над ним.

<div class="carousel-item">

    <div class="carousel-item-top">
        <img class="img-responsive" alt="a" src="carousel/crsl-img-1.png">
        <div class="carousel-item-top-hover"></div>
    </div>

    <div class="inline-block carousel-item-bottom">
        <h5 class="pull-left">Awesome Design</h5>
        <span class="pull-right share">
            74
            <i class="fa fa-heart"></i>
            <span class="v-sep"></span>
            <i class="fa fa-share"></i>
        </span>
    </div>

</div>

Css для предмета, который я надеюсь стать видимым

.carousel-item-top-hover{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #219fd1;
    opacity: 0.85;
    display: none;
}

И один из вариантов javascript я надеялся иметь возможность справиться с этим

$(".carousel-item-top").mouseenter(function () {
    $(this)(".carousel-item-top-hover").fadeIn('slow')
});

morgred 05 янв. 2014, в 01:20

Источник

0

Почему вы не используете CSS3 для этого? Похоже, идеальная ситуация.
Francisco Presencia 04 янв. 2014, в 23:47
0

@FranciscoPresencia Он, кажется, хочет, чтобы элементы реагировали на изменения в состоянии других элементов. Мне это кажется проблемой для jQuery.
itdoesntwork 04 янв. 2014, в 23:49
0

Похоже, он хочет, чтобы child элементы изменились для наведения или наведения родительского элемента на один и тот же элемент из именования (добавление -hover ), что можно сделать в CSS3. Но это может быть совершенно не связанный элемент (так что jquery там). Это на самом деле довольно расплывчато, поэтому я и спрашиваю.
Francisco Presencia 04 янв. 2014, в 23:51
0

@morgred, пожалуйста, уточните: хотите ли вы, чтобы элемент показывался, когда carosel-item-top (отражен в вашем коде)? Или ты хочешь, как ты просил (когда сам завис)
itdoesntwork 04 янв. 2014, в 23:52
0

я сделал редактирование, потому что кажется, что я не включил право HTML с первого раза. извините за путаницу, которую я вызвал
morgred 05 янв. 2014, в 07:18

Показать ещё 3 комментария

Теги:

javascript

jquery

html

css

3 ответа

Ещё вопросы

Почему вы не используете CSS3 для этого? Похоже, идеальная ситуация.
@FranciscoPresencia Он, кажется, хочет, чтобы элементы реагировали на изменения в состоянии других элементов. Мне это кажется проблемой для jQuery.
Похоже, он хочет, чтобы child элементы изменились для наведения или наведения родительского элемента на один и тот же элемент из именования (добавление -hover ), что можно сделать в CSS3. Но это может быть совершенно не связанный элемент (так что jquery там). Это на самом деле довольно расплывчато, поэтому я и спрашиваю.
@morgred, пожалуйста, уточните: хотите ли вы, чтобы элемент показывался, когда carosel-item-top (отражен в вашем коде)? Или ты хочешь, как ты просил (когда сам завис)
я сделал редактирование, потому что кажется, что я не включил право HTML с первого раза. извините за путаницу, которую я вызвал

itdoesntwork · Answer 1 · 2014-01-04T22-23-00.000Z

Примечание. То, что вы сказали, не отражает ваш код, который вы пробовали (вы сказали, что хотите, чтобы элемент отображался, когда мышь над ИТ, но код показывает, когда что-то еще зависнет.) Я предполагаю, что вы означало, что говорит ваш код.

Правильный обработчик - $ (el).mouseover().

$(".carousel-item-top").mouseover(function () {
    $(".carousel-item-top-hover").fadeIn('slow')
});

вы его почти получили, но у вас было лишнее (this).

Да, но fadeIn не будет работать с частично непрозрачным элементом. Смотрите мой ответ: stackoverflow.com/a/20928178/2535504
@ AlexanderO'Mara fadeIn jQuery автоматически устанавливает для дисплея что-то отличное от встроенного, встроенного блока, блока и т. Д.
Хм, я понимаю, что вы имеете в виду. Я не уверен, что он хочет больше.
@ AlexanderO'Mara Я понимаю, что ты имеешь в виду. Зачем устанавливать отображение на none, а затем устанавливать непрозрачность? (PS Пожалуйста, используйте @. Я случайно увидел ваш комментарий.)

Damien Black · Answer 2 · 2014-01-04T21-04-00.000Z

Вы не можете нависнуть над тем, что не отображается. Мышь не может нависнуть над чем-то, чего там нет. Возможно, вы захотите установить видимость на скрытый, а не на дисплей. Тогда еще есть место, где вы можете нависнуть над ним.

visibility: hidden;

Если это не сработает, установите непрозрачность в 0 и анимируйте непрозрачность до.85 при вводе мыши.

Sheng Slogar · Answer 3 · 2014-01-04T21-08-00.000Z

Вместо использования fadeIn используйте fadeTo следующим образом:

$(".carousel-item-top-hover").fadeTo('slow', 1);

Вместо медленного вы также можете обеспечить целое число для скорости в миллисекундах.