Reputation: 19
I put the below code up on gileslewey.com so you can see the issue easily.
I have remote, animated .gif rollovers set for each span tag in a series of heads--I used <span>
to vertically center the head next to an image (it's actually the same image, I haven't refactored any of the code yet). The first onmouseenter
(or onmouseover
, I tried both) and onmouseleave
(or onmouseout
) event works fine, but when I move to the next span head and leave, the onmouseleave
fires for both. And if I move to the third and move away cursor, onmouseleave
fires for all three. Can anyone suggest a fix for this, so onmouseleave
is triggered only when leaving that particular span?
<div id="padding">
<div class="box" id="padding2"><img id="centerImage" width="59.25" height="58.125" src="images/ccbl-white.gif" display="inline"><span onmouseenter="over()" onmouseleave="out()">Center for Character-based Leadership link one</span>
</div>
<div class="box" id="padding2"><img id="centerImage2" width="59.25" height="58.125" src="images/ccbl-white.gif" display="inline"><span onmouseenter="over2()" onmouseleave="out2()">Center for Character-based Leadership link two</span>
</div>
<div class="box" id="padding2"><img id="centerImage3" width="59.25" height="58.125" src="images/ccbl-white.gif" display="inline"><span onmouseenter="over3()" onmouseleave="out3()">Center for Character-based Leadership link three</span>
</div>
<div class="box" id="padding2"><img id="centerImage4" width="59.25" height="58.125" src="images/ccbl-white.gif" display="inline"><span onmouseenter="over4()" onmouseleave="out4()">Center for Character-based Leadership link four</span>
</div>
</div>
JS: (not refactored yet)
function over(){
document.getElementById("centerImage").src="images/imagemouseover.gif";
}
function out(){
document.getElementById("centerImage").src="images/imagemouseout.gif";
}
function over2(){
document.getElementById("centerImage2").src="images/imagemouseover.gif";
}
function out2(){
document.getElementById("centerImage2").src="images/imagemouseout.gif";
}
function over3(){
document.getElementById("centerImage3").src="images/imagemouseover.gif";
}
function out3(){
document.getElementById("centerImage3").src="images/imagemouseout.gif";
}
Upvotes: 0
Views: 77
Reputation: 313
I turned your code to a snippet and it seems to be working correctly.
The correct image is being affected for every span.
function over(){
document.getElementById("centerImage").src="images/imagemouseover.gif";
}
function out(){
document.getElementById("centerImage").src="images/imagemouseout.gif";
}
function over2(){
document.getElementById("centerImage2").src="images/imagemouseover.gif";
}
function out2(){
document.getElementById("centerImage2").src="images/imagemouseout.gif";
}
function over3(){
document.getElementById("centerImage3").src="images/imagemouseover.gif";
}
function out3(){
document.getElementById("centerImage3").src="images/imagemouseout.gif";
}
<div id="padding">
<div class="box" id="padding2"><img id="centerImage" width="59.25" height="58.125" src="images/ccbl-white.gif" display="inline"><span onmouseenter="over()" onmouseleave="out()">Center for Character-based Leadership link one</span>
</div>
<div class="box" id="padding2"><img id="centerImage2" width="59.25" height="58.125" src="images/ccbl-white.gif" display="inline"><span onmouseenter="over2()" onmouseleave="out2()">Center for Character-based Leadership link two</span>
</div>
<div class="box" id="padding2"><img id="centerImage3" width="59.25" height="58.125" src="images/ccbl-white.gif" display="inline"><span onmouseenter="over3()" onmouseleave="out3()">Center for Character-based Leadership link three</span>
</div>
<div class="box" id="padding2"><img id="centerImage4" width="59.25" height="58.125" src="images/ccbl-white.gif" display="inline"><span onmouseenter="over4()" onmouseleave="out4()">Center for Character-based Leadership link four</span>
</div>
</div>
.HasGifs > .In
{
display: none;
}
.HasGifs > .Out
{
display: block;
}
.GifText:hover ~ img.Out
{
display: none;
}
.GifText:hover ~ img.In
{
display: block;
}
<div class="HasGifs">
<span class = "GifText">This is the text you hover over</span>
<img src = "https://c.tenor.com/f-tX-7Czy0YAAAAM/lol-antonio-tabet.gif" class = "In">
<img src = "https://c.tenor.com/ENGYP4P6VcMAAAAM/uks-unbreakable-kimmy-schmitd.gif" class = "Out">
</div>
<div class="HasGifs">
<span class = "GifText">This is the text you hover over</span>
<img src = "https://c.tenor.com/f-tX-7Czy0YAAAAM/lol-antonio-tabet.gif" class = "In">
<img src = "https://c.tenor.com/ENGYP4P6VcMAAAAM/uks-unbreakable-kimmy-schmitd.gif" class = "Out">
</div>
<div class="HasGifs">
<span class = "GifText">This is the text you hover over</span>
<img src = "https://c.tenor.com/f-tX-7Czy0YAAAAM/lol-antonio-tabet.gif" class = "In">
<img src = "https://c.tenor.com/ENGYP4P6VcMAAAAM/uks-unbreakable-kimmy-schmitd.gif" class = "Out">
</div>
<div class="HasGifs">
<span class = "GifText">This is the text you hover over</span>
<img src = "https://c.tenor.com/f-tX-7Czy0YAAAAM/lol-antonio-tabet.gif" class = "In">
<img src = "https://c.tenor.com/ENGYP4P6VcMAAAAM/uks-unbreakable-kimmy-schmitd.gif" class = "Out">
</div>
<div class="HasGifs">
<span class = "GifText">This is the text you hover over</span>
<img src = "https://c.tenor.com/f-tX-7Czy0YAAAAM/lol-antonio-tabet.gif" class = "In">
<img src = "https://c.tenor.com/ENGYP4P6VcMAAAAM/uks-unbreakable-kimmy-schmitd.gif" class = "Out">
</div>
Upvotes: 0
Reputation: 35106
You can do all this just using CSS, for instance:
<div id="padding">
<div class="box" id="padding2"><img id="centerImage" width="59.25" height="58.125" src="images/ccbl-white.gif" display="inline"><img id="centerImage_over" width="59.25" height="58.125" src="images/imagemouseover.gif">
...
with CSS like:
div:hover #centerImage {
display:none;
}
#centerImage_over {
display:none;
}
div:hover #centerImage_over {
display:inline;
}
Upvotes: 0