jQuery на mouseEnter исчезает в цвете фона

Question

jQuery на mouseEnter исчезает в цвете фона

0

Я пытаюсь получить цвет фона <h2> и цвет его брака <p> чтобы он исчезал с другим цветом при наведении и исчезал до исходного цвета, когда вы больше не вибрируете над ним.

Кажется, я не понимаю.

Здесь у меня есть:

jQuery('div.flex-caption h2').hover(function() {
    jQuery( this ).css({background:'#2F2F2F'}).fadeIn( 500 );
    jQuery( this ).sibling('p').css({background:'#2F2F2F'}).fadeIn( 500 );
},
function() {
    jQuery( this ).css({background:'rgba(0, 0, 0, 0.5)'}).fadeIn( 500 );
    jQuery( this ).sibling('p').css({background:'rgba(0, 0, 0, 0.5)'}).fadeIn( 500 );
});

jQuery('div.flex-caption p').hover(function() {
    jQuery( this ).css({background:'#2F2F2F'}).fadeIn( 500 );
    jQuery( this ).sibling('h2').css({background:'#2F2F2F'}).fadeIn( 500 );
},
function() {
    jQuery( this ).css({background:'rgba(0, 0, 0, 0.5)'}).fadeIn( 500 );
    jQuery( this ).sibling('h2').css({background:'rgba(0, 0, 0, 0.5)'}).fadeIn( 500 );
});

Разметка HTML:

<div class="flex-caption">
<h2 class="captionTitle">TITLE</h2>
<div class="captionText">CONTENT</div>
</div>

Austin Biggs 11 нояб. 2013, в 19:30

Источник

0

Что происходит, когда вы пытаетесь это сделать?
tymeJV 11 нояб. 2013, в 18:03
1

В вашей разметке нет элемента <p>
Dan-Nolan 11 нояб. 2013, в 18:04
0

И rgba(0, 0, 0, 0.5) не является исходным цветом (он должен быть белым).
Chris Laplante 11 нояб. 2013, в 18:04
0

это siblings и siblings не siblings sibling .
shyammtp 11 нояб. 2013, в 18:07
0

Посмотрите здесь: stackoverflow.com/questions/190560/…
hugo der hungrige 11 нояб. 2013, в 18:08

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

Теги:

javascript

jquery

html

css

2 ответа

Ещё вопросы

Что происходит, когда вы пытаетесь это сделать?
В вашей разметке нет элемента <p>
И rgba(0, 0, 0, 0.5) не является исходным цветом (он должен быть белым).
Посмотрите здесь: stackoverflow.com/questions/190560/…

Justin Wood · Answer 1 · 2013-11-11T15-23-00.000Z

Я бы просто использовал для этого чистый CSS.

Вы можете использовать transition в CSS3, чтобы выполнить то, что вы пытаетесь сделать.

h2 {
    background-color: red;
    transition: background-color .25s ease-in-out
    -moz-transition: background-color .25s ease-in-out
    -webkit-transition: background-color .25s ease-in-out
}

h2:hover {
    background-color: blue;
}

Псевдокласс класса hover будет соответствовать, когда вы нависаете над элементом h2.

Вот сценарий и пример.

http://jsfiddle.net/sC4He/

ПРИМЕЧАНИЕ. При использовании CSS3 он не будет работать в старых браузерах.

elyasnew · Answer 2 · 2013-11-11T17-48-00.000Z

Первая проблема заключается в том, что у вас нет тэга p в вашем элементе HTML, а вторая проблема заключается в том, что вы не можете одновременно использовать 2 функции для запуска события

поэтому здесь вы можете увидеть правильное решение,

HTML:

<div class="flex-caption">
<h2 class="captionTitle">TITLE</h2>
<p class="captionText">CONTENT</p>
</div>

JS:

jQuery('div.flex-caption h2').mouseover(function() {
    jQuery( this ).css({background:'#2F2F2F'}).fadeIn( 500 );
    jQuery( this ).sibling('h2').css({background:'#2F2F2F'}).fadeIn( 500 );
});
jQuery('div.flex-caption p').mouseover(function() {
    jQuery( this ).css({background:'#2F2F2F'}).fadeIn( 500 );
    jQuery( this ).sibling('p').css({background:'#2F2F2F'}).fadeIn( 500 );
});
jQuery('div.flex-caption h2').mouseout(function() {
    jQuery( this ).css({background:'#FFFFFF'}).fadeIn( 500 );
    jQuery( this ).sibling('h2').css({background:'#FFFFFF'}).fadeIn( 500 );
});

jQuery('div.flex-caption p').mouseout(function() {
    jQuery( this ).css({background:'#FFFFFF'}).fadeIn( 500 );
    jQuery( this ).sibling('p').css({background:'#FFFFFF'}).fadeIn( 500 );
});

см. также http://jsfiddle.net/sC4He/5/

надеюсь, что это поможет