0

<h2>兄弟の背景色を取得しようとして<p>います。ホバーすると別の色にフェードし、ホバーしていないときに元の色にフェードバックします。

私はそれを正しく理解できないようです..

これが私が持っているJSです：

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>
4

2 に答える 2

0

1 つ目の問題は、HTML 要素に p タグがないことです。2 つ目の問題は、イベントをトリガーするために 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/も参照してください

それが役立つことを願っています

于 2013-11-11T19:07:29.363 に答える