shown image only after mouse hover 2 times?
0
It's very simple code
<img src="images/Card.png" id=I1 class="img"/>
<img src="images/Card.png" id=I2 class="img"/>
<img src="images/Card.png" id=I3 class="img"/>
<img src="images/Card.png" id=I4 class="img"/>
<img src="images/Capture1.JPG" id="myImage1" style="display: none ; " />
<img src="images/Capture2.JPG" id="myImage2" style="display: none ; " />
<img src="images/Capture3.JPG" id="myImage3" style="display: none ; " />
<img src="images/Capture4.JPG" id="myImage4" style="display: none ; " />
<script>
$('.img').mouseover(function() {
var GetId = this.id.substring(1);
$("#I" + GetId).hover(
function () { $("#myImage" + GetId ).show(); },
function () { $("#myImage" + GetId ).hide(); } );
});
</script>
It's working fine, but it have one problem you need put mouse over 2 times to display image.
Google the problem but no solution.
Can any one help?
Thank you
jquery html onmouseover
asked Nov 21 '18 at 14:45
Green_CrocodileGreen_Crocodile
206
add a comment |
0
It's very simple code
<img src="images/Card.png" id=I1 class="img"/>
<img src="images/Card.png" id=I2 class="img"/>
<img src="images/Card.png" id=I3 class="img"/>
<img src="images/Card.png" id=I4 class="img"/>
<img src="images/Capture1.JPG" id="myImage1" style="display: none ; " />
<img src="images/Capture2.JPG" id="myImage2" style="display: none ; " />
<img src="images/Capture3.JPG" id="myImage3" style="display: none ; " />
<img src="images/Capture4.JPG" id="myImage4" style="display: none ; " />
<script>
$('.img').mouseover(function() {
var GetId = this.id.substring(1);
$("#I" + GetId).hover(
function () { $("#myImage" + GetId ).show(); },
function () { $("#myImage" + GetId ).hide(); } );
});
</script>
It's working fine, but it have one problem you need put mouse over 2 times to display image.
Google the problem but no solution.
Can any one help?
Thank you
jquery html onmouseover
asked Nov 21 '18 at 14:45
Green_CrocodileGreen_Crocodile
206
$().hover()is an binding event listeners, just like your mouseover is binding an event listener. So of course it takes two times. Also, this logic is going to bind the hover event listener every time the image is mouseover, which is a bad idea.
– Taplar
Nov 21 '18 at 14:46
add a comment |
0
0
0
It's very simple code
<img src="images/Card.png" id=I1 class="img"/>
<img src="images/Card.png" id=I2 class="img"/>
<img src="images/Card.png" id=I3 class="img"/>
<img src="images/Card.png" id=I4 class="img"/>
<img src="images/Capture1.JPG" id="myImage1" style="display: none ; " />
<img src="images/Capture2.JPG" id="myImage2" style="display: none ; " />
<img src="images/Capture3.JPG" id="myImage3" style="display: none ; " />
<img src="images/Capture4.JPG" id="myImage4" style="display: none ; " />
<script>
$('.img').mouseover(function() {
var GetId = this.id.substring(1);
$("#I" + GetId).hover(
function () { $("#myImage" + GetId ).show(); },
function () { $("#myImage" + GetId ).hide(); } );
});
</script>
It's working fine, but it have one problem you need put mouse over 2 times to display image.
Google the problem but no solution.
Can any one help?
Thank you
jquery html onmouseover
asked Nov 21 '18 at 14:45
Green_CrocodileGreen_Crocodile
206
It's very simple code
<img src="images/Card.png" id=I1 class="img"/>
<img src="images/Card.png" id=I2 class="img"/>
<img src="images/Card.png" id=I3 class="img"/>
<img src="images/Card.png" id=I4 class="img"/>
<img src="images/Capture1.JPG" id="myImage1" style="display: none ; " />
<img src="images/Capture2.JPG" id="myImage2" style="display: none ; " />
<img src="images/Capture3.JPG" id="myImage3" style="display: none ; " />
<img src="images/Capture4.JPG" id="myImage4" style="display: none ; " />
<script>
$('.img').mouseover(function() {
var GetId = this.id.substring(1);
$("#I" + GetId).hover(
function () { $("#myImage" + GetId ).show(); },
function () { $("#myImage" + GetId ).hide(); } );
});
</script>
It's working fine, but it have one problem you need put mouse over 2 times to display image.
Google the problem but no solution.
Can any one help?
Thank you
jquery html onmouseover
jquery html onmouseover
asked Nov 21 '18 at 14:45
Green_CrocodileGreen_Crocodile
206
asked Nov 21 '18 at 14:45
Green_CrocodileGreen_Crocodile
206
asked Nov 21 '18 at 14:45
Green_CrocodileGreen_Crocodile
206
asked Nov 21 '18 at 14:45
Green_CrocodileGreen_Crocodile
206
asked Nov 21 '18 at 14:45
Green_CrocodileGreen_Crocodile
206
206
$().hover()is an binding event listeners, just like your mouseover is binding an event listener. So of course it takes two times. Also, this logic is going to bind the hover event listener every time the image is mouseover, which is a bad idea.
– Taplar
Nov 21 '18 at 14:46
add a comment |
$().hover()is an binding event listeners, just like your mouseover is binding an event listener. So of course it takes two times. Also, this logic is going to bind the hover event listener every time the image is mouseover, which is a bad idea.
– Taplar
Nov 21 '18 at 14:46
$().hover() is an binding event listeners, just like your mouseover is binding an event listener. So of course it takes two times. Also, this logic is going to bind the hover event listener every time the image is mouseover, which is a bad idea.– Taplar
Nov 21 '18 at 14:46
$().hover() is an binding event listeners, just like your mouseover is binding an event listener. So of course it takes two times. Also, this logic is going to bind the hover event listener every time the image is mouseover, which is a bad idea.– Taplar
Nov 21 '18 at 14:46
add a comment |
2 Answers
2
active
oldest
votes
1
You can simplify your logic, and fix your issue in the process, by using a data field on the mouseover images.
$('.img')
.on('mouseenter', function(){
$('#'+ $(this).data('target')).show();
})
.on('mouseleave', function(){
$('#'+ $(this).data('target')).hide();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="images/Card.png" id=I1 class="img" data-target="myImage1" />
<img src="images/Card.png" id=I2 class="img" data-target="myImage2" />
<img src="images/Card.png" id=I3 class="img" data-target="myImage3" />
<img src="images/Card.png" id=I4 class="img" data-target="myImage4" />
<img src="images/Capture1.JPG" id="myImage1" style="display: none ; " alt="image1" />
<img src="images/Capture2.JPG" id="myImage2" style="display: none ; " alt="image2" />
<img src="images/Capture3.JPG" id="myImage3" style="display: none ; " alt="image3" />
<img src="images/Capture4.JPG" id="myImage4" style="display: none ; " alt="image4" />answered Nov 21 '18 at 14:52
TaplarTaplar
17.3k21529
Thank you Taplar. Your code working perfectly.
– Green_Crocodile
Nov 21 '18 at 15:37
add a comment |
0
IF you can group the images together should do this by using pure css. If not use Taplar's answer.
Example:
html:
<!-- repeat for all your images -->
<div class="image-wrapper">
<img class="img">
<img class="image-on-hover">
</div>
CSS:
.image-on-hover{
display:none
}
.img:hover ~.image-on-hover{
display: block
}
Explanation:
The :hover Selector on CSS will be triggered when an element is hovered. With the ~ selector you can select a child element on the same level (you could call it "neighbour-element"). Since we don't want to display all neighbouring hover-images, we wrap the pairs of image and hover-images together
Different option if your grouping is exactly like the example:
.image-on-hover{
display: none;
}
/*repeat for every image pair */
#I1:hover ~ #myImage1{
display:block
}
answered Nov 21 '18 at 14:49
HeadyHeady
365318
This only works if they are grouped together, no? The OP is not grouping what is being hovered with what is being shown on hover.
– Taplar
Nov 21 '18 at 14:53
Yes, i don't know the entire use case. It really depends on how these containers are actually grouped. It can also work if the structure is different though. Would have to see the actual html
– Heady
Nov 21 '18 at 14:56
e.g. if the grouping is exactly like the example you can do this:.hover-image{ display: none}; #I1: hover ~ #myImage1{ display: block}and so on
– Heady
Nov 21 '18 at 14:56
Unfortunatly I can't group the images together. But Taplar's code it what I am looking for. but thank you for another options.
– Green_Crocodile
Nov 21 '18 at 15:39
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53414553%2fshown-image-only-after-mouse-hover-2-times%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
You can simplify your logic, and fix your issue in the process, by using a data field on the mouseover images.
$('.img')
.on('mouseenter', function(){
$('#'+ $(this).data('target')).show();
})
.on('mouseleave', function(){
$('#'+ $(this).data('target')).hide();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="images/Card.png" id=I1 class="img" data-target="myImage1" />
<img src="images/Card.png" id=I2 class="img" data-target="myImage2" />
<img src="images/Card.png" id=I3 class="img" data-target="myImage3" />
<img src="images/Card.png" id=I4 class="img" data-target="myImage4" />
<img src="images/Capture1.JPG" id="myImage1" style="display: none ; " alt="image1" />
<img src="images/Capture2.JPG" id="myImage2" style="display: none ; " alt="image2" />
<img src="images/Capture3.JPG" id="myImage3" style="display: none ; " alt="image3" />
<img src="images/Capture4.JPG" id="myImage4" style="display: none ; " alt="image4" />answered Nov 21 '18 at 14:52
TaplarTaplar
17.3k21529
Thank you Taplar. Your code working perfectly.
– Green_Crocodile
Nov 21 '18 at 15:37
add a comment |
1
You can simplify your logic, and fix your issue in the process, by using a data field on the mouseover images.
$('.img')
.on('mouseenter', function(){
$('#'+ $(this).data('target')).show();
})
.on('mouseleave', function(){
$('#'+ $(this).data('target')).hide();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="images/Card.png" id=I1 class="img" data-target="myImage1" />
<img src="images/Card.png" id=I2 class="img" data-target="myImage2" />
<img src="images/Card.png" id=I3 class="img" data-target="myImage3" />
<img src="images/Card.png" id=I4 class="img" data-target="myImage4" />
<img src="images/Capture1.JPG" id="myImage1" style="display: none ; " alt="image1" />
<img src="images/Capture2.JPG" id="myImage2" style="display: none ; " alt="image2" />
<img src="images/Capture3.JPG" id="myImage3" style="display: none ; " alt="image3" />
<img src="images/Capture4.JPG" id="myImage4" style="display: none ; " alt="image4" />answered Nov 21 '18 at 14:52
TaplarTaplar
17.3k21529
Thank you Taplar. Your code working perfectly.
– Green_Crocodile
Nov 21 '18 at 15:37
add a comment |
1
1
1
You can simplify your logic, and fix your issue in the process, by using a data field on the mouseover images.
$('.img')
.on('mouseenter', function(){
$('#'+ $(this).data('target')).show();
})
.on('mouseleave', function(){
$('#'+ $(this).data('target')).hide();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="images/Card.png" id=I1 class="img" data-target="myImage1" />
<img src="images/Card.png" id=I2 class="img" data-target="myImage2" />
<img src="images/Card.png" id=I3 class="img" data-target="myImage3" />
<img src="images/Card.png" id=I4 class="img" data-target="myImage4" />
<img src="images/Capture1.JPG" id="myImage1" style="display: none ; " alt="image1" />
<img src="images/Capture2.JPG" id="myImage2" style="display: none ; " alt="image2" />
<img src="images/Capture3.JPG" id="myImage3" style="display: none ; " alt="image3" />
<img src="images/Capture4.JPG" id="myImage4" style="display: none ; " alt="image4" />answered Nov 21 '18 at 14:52
TaplarTaplar
17.3k21529
You can simplify your logic, and fix your issue in the process, by using a data field on the mouseover images.
$('.img')
.on('mouseenter', function(){
$('#'+ $(this).data('target')).show();
})
.on('mouseleave', function(){
$('#'+ $(this).data('target')).hide();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="images/Card.png" id=I1 class="img" data-target="myImage1" />
<img src="images/Card.png" id=I2 class="img" data-target="myImage2" />
<img src="images/Card.png" id=I3 class="img" data-target="myImage3" />
<img src="images/Card.png" id=I4 class="img" data-target="myImage4" />
<img src="images/Capture1.JPG" id="myImage1" style="display: none ; " alt="image1" />
<img src="images/Capture2.JPG" id="myImage2" style="display: none ; " alt="image2" />
<img src="images/Capture3.JPG" id="myImage3" style="display: none ; " alt="image3" />
<img src="images/Capture4.JPG" id="myImage4" style="display: none ; " alt="image4" />$('.img')
.on('mouseenter', function(){
$('#'+ $(this).data('target')).show();
})
.on('mouseleave', function(){
$('#'+ $(this).data('target')).hide();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="images/Card.png" id=I1 class="img" data-target="myImage1" />
<img src="images/Card.png" id=I2 class="img" data-target="myImage2" />
<img src="images/Card.png" id=I3 class="img" data-target="myImage3" />
<img src="images/Card.png" id=I4 class="img" data-target="myImage4" />
<img src="images/Capture1.JPG" id="myImage1" style="display: none ; " alt="image1" />
<img src="images/Capture2.JPG" id="myImage2" style="display: none ; " alt="image2" />
<img src="images/Capture3.JPG" id="myImage3" style="display: none ; " alt="image3" />
<img src="images/Capture4.JPG" id="myImage4" style="display: none ; " alt="image4" />$('.img')
.on('mouseenter', function(){
$('#'+ $(this).data('target')).show();
})
.on('mouseleave', function(){
$('#'+ $(this).data('target')).hide();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="images/Card.png" id=I1 class="img" data-target="myImage1" />
<img src="images/Card.png" id=I2 class="img" data-target="myImage2" />
<img src="images/Card.png" id=I3 class="img" data-target="myImage3" />
<img src="images/Card.png" id=I4 class="img" data-target="myImage4" />
<img src="images/Capture1.JPG" id="myImage1" style="display: none ; " alt="image1" />
<img src="images/Capture2.JPG" id="myImage2" style="display: none ; " alt="image2" />
<img src="images/Capture3.JPG" id="myImage3" style="display: none ; " alt="image3" />
<img src="images/Capture4.JPG" id="myImage4" style="display: none ; " alt="image4" />answered Nov 21 '18 at 14:52
TaplarTaplar
17.3k21529
answered Nov 21 '18 at 14:52
TaplarTaplar
17.3k21529
answered Nov 21 '18 at 14:52
TaplarTaplar
17.3k21529
answered Nov 21 '18 at 14:52
TaplarTaplar
17.3k21529
17.3k21529
Thank you Taplar. Your code working perfectly.
– Green_Crocodile
Nov 21 '18 at 15:37
add a comment |
Thank you Taplar. Your code working perfectly.
– Green_Crocodile
Nov 21 '18 at 15:37
Thank you Taplar. Your code working perfectly.
– Green_Crocodile
Nov 21 '18 at 15:37
Thank you Taplar. Your code working perfectly.
– Green_Crocodile
Nov 21 '18 at 15:37
add a comment |
0
IF you can group the images together should do this by using pure css. If not use Taplar's answer.
Example:
html:
<!-- repeat for all your images -->
<div class="image-wrapper">
<img class="img">
<img class="image-on-hover">
</div>
CSS:
.image-on-hover{
display:none
}
.img:hover ~.image-on-hover{
display: block
}
Explanation:
The :hover Selector on CSS will be triggered when an element is hovered. With the ~ selector you can select a child element on the same level (you could call it "neighbour-element"). Since we don't want to display all neighbouring hover-images, we wrap the pairs of image and hover-images together
Different option if your grouping is exactly like the example:
.image-on-hover{
display: none;
}
/*repeat for every image pair */
#I1:hover ~ #myImage1{
display:block
}
answered Nov 21 '18 at 14:49
HeadyHeady
365318
This only works if they are grouped together, no? The OP is not grouping what is being hovered with what is being shown on hover.
– Taplar
Nov 21 '18 at 14:53
Yes, i don't know the entire use case. It really depends on how these containers are actually grouped. It can also work if the structure is different though. Would have to see the actual html
– Heady
Nov 21 '18 at 14:56
e.g. if the grouping is exactly like the example you can do this:.hover-image{ display: none}; #I1: hover ~ #myImage1{ display: block}and so on
– Heady
Nov 21 '18 at 14:56
Unfortunatly I can't group the images together. But Taplar's code it what I am looking for. but thank you for another options.
– Green_Crocodile
Nov 21 '18 at 15:39
add a comment |
0
IF you can group the images together should do this by using pure css. If not use Taplar's answer.
Example:
html:
<!-- repeat for all your images -->
<div class="image-wrapper">
<img class="img">
<img class="image-on-hover">
</div>
CSS:
.image-on-hover{
display:none
}
.img:hover ~.image-on-hover{
display: block
}
Explanation:
The :hover Selector on CSS will be triggered when an element is hovered. With the ~ selector you can select a child element on the same level (you could call it "neighbour-element"). Since we don't want to display all neighbouring hover-images, we wrap the pairs of image and hover-images together
Different option if your grouping is exactly like the example:
.image-on-hover{
display: none;
}
/*repeat for every image pair */
#I1:hover ~ #myImage1{
display:block
}
answered Nov 21 '18 at 14:49
HeadyHeady
365318
This only works if they are grouped together, no? The OP is not grouping what is being hovered with what is being shown on hover.
– Taplar
Nov 21 '18 at 14:53
Yes, i don't know the entire use case. It really depends on how these containers are actually grouped. It can also work if the structure is different though. Would have to see the actual html
– Heady
Nov 21 '18 at 14:56
e.g. if the grouping is exactly like the example you can do this:.hover-image{ display: none}; #I1: hover ~ #myImage1{ display: block}and so on
– Heady
Nov 21 '18 at 14:56
Unfortunatly I can't group the images together. But Taplar's code it what I am looking for. but thank you for another options.
– Green_Crocodile
Nov 21 '18 at 15:39
add a comment |
0
0
0
IF you can group the images together should do this by using pure css. If not use Taplar's answer.
Example:
html:
<!-- repeat for all your images -->
<div class="image-wrapper">
<img class="img">
<img class="image-on-hover">
</div>
CSS:
.image-on-hover{
display:none
}
.img:hover ~.image-on-hover{
display: block
}
Explanation:
The :hover Selector on CSS will be triggered when an element is hovered. With the ~ selector you can select a child element on the same level (you could call it "neighbour-element"). Since we don't want to display all neighbouring hover-images, we wrap the pairs of image and hover-images together
Different option if your grouping is exactly like the example:
.image-on-hover{
display: none;
}
/*repeat for every image pair */
#I1:hover ~ #myImage1{
display:block
}
answered Nov 21 '18 at 14:49
HeadyHeady
365318
IF you can group the images together should do this by using pure css. If not use Taplar's answer.
Example:
html:
<!-- repeat for all your images -->
<div class="image-wrapper">
<img class="img">
<img class="image-on-hover">
</div>
CSS:
.image-on-hover{
display:none
}
.img:hover ~.image-on-hover{
display: block
}
Explanation:
The :hover Selector on CSS will be triggered when an element is hovered. With the ~ selector you can select a child element on the same level (you could call it "neighbour-element"). Since we don't want to display all neighbouring hover-images, we wrap the pairs of image and hover-images together
Different option if your grouping is exactly like the example:
.image-on-hover{
display: none;
}
/*repeat for every image pair */
#I1:hover ~ #myImage1{
display:block
}
answered Nov 21 '18 at 14:49
HeadyHeady
365318
edited Nov 21 '18 at 15:00
answered Nov 21 '18 at 14:49
HeadyHeady
365318
answered Nov 21 '18 at 14:49
HeadyHeady
365318
answered Nov 21 '18 at 14:49
HeadyHeady
365318
365318
This only works if they are grouped together, no? The OP is not grouping what is being hovered with what is being shown on hover.
– Taplar
Nov 21 '18 at 14:53
Yes, i don't know the entire use case. It really depends on how these containers are actually grouped. It can also work if the structure is different though. Would have to see the actual html
– Heady
Nov 21 '18 at 14:56
e.g. if the grouping is exactly like the example you can do this:.hover-image{ display: none}; #I1: hover ~ #myImage1{ display: block}and so on
– Heady
Nov 21 '18 at 14:56
Unfortunatly I can't group the images together. But Taplar's code it what I am looking for. but thank you for another options.
– Green_Crocodile
Nov 21 '18 at 15:39
add a comment |
This only works if they are grouped together, no? The OP is not grouping what is being hovered with what is being shown on hover.
– Taplar
Nov 21 '18 at 14:53
Yes, i don't know the entire use case. It really depends on how these containers are actually grouped. It can also work if the structure is different though. Would have to see the actual html
– Heady
Nov 21 '18 at 14:56
e.g. if the grouping is exactly like the example you can do this:.hover-image{ display: none}; #I1: hover ~ #myImage1{ display: block}and so on
– Heady
Nov 21 '18 at 14:56
Unfortunatly I can't group the images together. But Taplar's code it what I am looking for. but thank you for another options.
– Green_Crocodile
Nov 21 '18 at 15:39
This only works if they are grouped together, no? The OP is not grouping what is being hovered with what is being shown on hover.
– Taplar
Nov 21 '18 at 14:53
This only works if they are grouped together, no? The OP is not grouping what is being hovered with what is being shown on hover.
– Taplar
Nov 21 '18 at 14:53
Yes, i don't know the entire use case. It really depends on how these containers are actually grouped. It can also work if the structure is different though. Would have to see the actual html
– Heady
Nov 21 '18 at 14:56
Yes, i don't know the entire use case. It really depends on how these containers are actually grouped. It can also work if the structure is different though. Would have to see the actual html
– Heady
Nov 21 '18 at 14:56
e.g. if the grouping is exactly like the example you can do this:
.hover-image{ display: none}; #I1: hover ~ #myImage1{ display: block} and so on– Heady
Nov 21 '18 at 14:56
e.g. if the grouping is exactly like the example you can do this:
.hover-image{ display: none}; #I1: hover ~ #myImage1{ display: block} and so on– Heady
Nov 21 '18 at 14:56
Unfortunatly I can't group the images together. But Taplar's code it what I am looking for. but thank you for another options.
– Green_Crocodile
Nov 21 '18 at 15:39
Unfortunatly I can't group the images together. But Taplar's code it what I am looking for. but thank you for another options.
– Green_Crocodile
Nov 21 '18 at 15:39
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53414553%2fshown-image-only-after-mouse-hover-2-times%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
$().hover()is an binding event listeners, just like your mouseover is binding an event listener. So of course it takes two times. Also, this logic is going to bind the hover event listener every time the image is mouseover, which is a bad idea.– Taplar
Nov 21 '18 at 14:46