Reputation:
Sorry for the bad title, don't realy know how te explain it in that short.
Well I have a img
, when I hover it it shows a div with some text.
That div appears in the img
you were hoverd in, and when you hover that div...
You exualy leave the img
so the div with the text dissapear.
So what my question realy is, is how can I let it still display it as block?
I already tried something;
The jQuery part;
$("img#hover-for-text").on("mouseover", function(){
$(this).next().stop().fadeIn();
});
$("#text-hold").on("mouseover", function(){
$(this).next().stop().fadeIn();
});
$("img#hover-for-text").on("mouseleave", function(){
$(this).next().stop().fadeOut();
});
The HTML part;
<div class="panel-body">
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<img src="images/projects/<?=$data['picture']?>" class="img-responsive" id="hover-for-text">
<div class="carousel-caption">
<a style="color:black;"><?=$data['content']?></a>
</div>
</div>
</div>
The CSS part;
.carousel-caption {
display: none;
}
Upvotes: 1
Views: 1136
Reputation: 4054
Instead of putting mouse over for the image you have to put mouse over for the parent component
$("#mycarousel").on("mouseover", function(){
$(".carousel-caption",this).stop().fadeIn();
});
$("#mycarousel").on("mouseleave", function(){
$(".carousel-caption",this).stop().fadeOut();
});
will be better choice
Here the ",this" will allow you to select "carousel-caption" only the currently focused carousel
Check http://jsfiddle.net/ZigmaEmpire/6a18txbu/1/
In case your #mycarousel is the parent most then introduce another div inside it and write mouse event for it with class name instead of id
Upvotes: 1
Reputation: 8057
You can bind the events to the .slide
div and work with the children of it, so the mouse never leaves the parent div.
Like this:
$(document).ready(function () {
$(".slide").on("mouseover", function () {
$(this).find(".carousel-caption").stop().fadeIn();
});
$(".slide").on("mouseleave", function () {
$(this).find(".carousel-caption").stop().fadeOut();
});
})
Upvotes: 1