CODEWITHSUNDEEP
jqueryhtmlcss
user4640949
user4640949

Reputation:

Show div and hold it when hover on image

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

Answers (2)

Dickens A S
Dickens A S

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

Joel Almeida
Joel Almeida

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();
    });

})

Fiddle

Upvotes: 1

Related Questions