複数のdivを表示/非表示にして親の背景画像を切り替える

私は5つのdivを持ち、それぞれ独自の背景画像を持っています。各divの中にテキストリンクがあります。 divまたはテキストリンクのいずれかにマウスを移動すると、divの背景をスワップしてロールオーバー効果を作成する必要があります。各divのロールオーバー状態も一意ですので、div1（#colOne）はbgOne.pngとbgOne_ro.png、div2（#colTwo）はbgTwo.pngとbgTwo_ro.pngの間で交互に表示されます。複数のdivを表示/非表示にして親の背景画像を切り替える

CSSには十分ですが、ここで少し複雑になります。

テキストリンクをクリックすると、親divの背景がbg * _ro.pngに変更されるので、マウスを離してもそれが維持されます。同時に、そのテキストリンクに固有の隠れたdivを表示する必要があります。

この非表示のdivには、独自の閉じるボタンが表示されます（おそらく表示：CSSで非表示）。それを閉じると、それを明らかにしたテキストリンクの親divはバックグラウンドをbg * .pngに戻す必要があります。物事は、隠されたdivを明らかにする前と同じように動作するようになりました。

5つのテキストリンクがあるため、潜在的に公開される5つの隠しdivがあります。いつでも一人の隠れたdivを明らかにする必要があります。テキストリンクをクリックすると、現在表示されているdivが隠されているかどうかを隠すだけでなく、divに関連付けられているdivを明らかにする必要があります。

私は、物事をより明確にするのに役立ついくつかの構造コードを含めました。

ご協力いただければ幸いです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
body { 
font-family:Arial, Helvetica, sans-serif; 
background-color:#333333; 
margin: 0px; 
padding: 0px; 
} 
#Container { 
width:1000px; 
margin:auto; 
left:50%; 
} 
.Column { 
width:199px; 
height:700px; 
float:left; 
border-left-width: 1px; 
border-left-style: solid; 
border-left-color: #FFFFFF; 
text-align:center; 
} 
#colOne { 
background-image: url(bgOne.png); 
} 
#colOne:hover { 
background-image: url(bgOne_ro.png); 
} 
#colTwo { 
background-image: url(bgTwo.png); 
} 
#colTwo:hover { 
background-image: url(bgTwo_ro.png); 
} 
#colThree { 
background-image: url(bgThree.png); 
} 
#colThree:hover { 
background-image: url(bgThree_ro.png); 
} 
#colFour { 
background-image: url(bgFour.png); 
} 
#colFour:hover { 
background-image: url(bgFour_ro.png); 
} 
#colFive { 
background-image: url(bgFive.png); 
} 
#colFive:hover { 
background-image: url(bgFive_ro.png); 
} 
a { 
position:relative; 
text-align:center; 
top:600px; 
} 
</style> 
</head> 
<body> 
<div id="Container"> 
    <div class="Column" id="colOne"> 
    <a>Testing</a> 
</div> 
    <div class="Column" id="colTwo"> 
    <a>Testing</a> 
</div> 
    <div class="Column" id="colThree"> 
    <a>Testing</a> 
</div> 
    <div class="Column" id="colFour"> 
    <a>Testing</a> 
</div> 
    <div class="Column" id="colFive"> 
    <a>Testing</a>  
</div> 
</div> 
</body> 
</html>

出典

2012-05-05 Lee C

$('.Column').click(function() { 
    $('#Container').css('background-image', $(this).css('background-image')); 
});

出典

2012-05-05 03:20:23

おかげマリアン。実際には#colOneの背景にロールオーバー効果が必要です。 #Containerはdivを中央に配置するための単なるコンテナです。 –

複数のdivを表示/非表示にして親の背景画像を切り替える

答えて

関連する問題