CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Marius
Marius

Reputation: 1281

How can display text only when mouse over

I have this sample:

link

CODE HTML:

SED PERSPICIATIS

Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt
explicabo. 

<div class="col-md-4 tab-bottom">
    <div class="tab-bottom-img"><img width="380" height="380" src="http://dg-design.ch/bagel/wp-content/uploads/2016/02/1-380x380.png" class="attachment-news wp-post-image" alt="1"> </div>
    <div class="tab-bottom-content">
        <div>
            <p class="title_bottom">SED PERSPICIATIS</p>
            <p class="content_bottom"></p><p>
                Sed ut perspiciatis unde omnis iste natus error sit<br>
                voluptatem accusantium doloremque laudantium,<br>
                totam rem aperiam, eaque ipsa quae ab illo inventore<br>
                veritatis et quasi architecto beatae vitae dicta sunt<br>
                explicabo.
            </p>
            <p></p>
        </div>
    </div>
</div>
<div class="col-md-4 tab-bottom">
    <div class="tab-bottom-img"><img width="380" height="380" src="http://dg-design.ch/bagel/wp-content/uploads/2016/02/1-380x380.png" class="attachment-news wp-post-image" alt="1"> </div>
    <div class="tab-bottom-content">
        <div>
            <p class="title_bottom">SED PERSPICIATIS</p>
            <p class="content_bottom"></p><p>
                Sed ut perspiciatis unde omnis iste natus error sit<br>
                voluptatem accusantium doloremque laudantium,<br>
                totam rem aperiam, eaque ipsa quae ab illo inventore<br>
                veritatis et quasi architecto beatae vitae dicta sunt<br>
                explicabo.
            </p>
            <p></p>
        </div>
    </div>
</div>

CODE CSS:

.col-md-4 {
    width: 33.33333333%;
}
.tab-bottom {
    position: relative;
    height: 400px;
    float:left;
}
.tab-bottom-img {
    width: 100%;
    position: absolute;
    top: 50%;
    height: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.tab-bottom-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

CODE JS:

$(".tab-bottom").bind('mouseover',function(event){
    $(this).find("tab-bottom-content").css("display", "block");
});
$('.tab-bottom-img').bind('mouseleave', function(e) {

});

I want the text in the div tab-bottom-content to be displayed only when the mouse is over.

I tried to use the script above but unfortunately does not work

Can you help me to solve this problem?

Thanks in advance!

Upvotes: 1

Views: 1031

Answers (4)

Ibrahim Khan
Ibrahim Khan

Reputation: 20750

You should initially hide .tab-bottom-content using display: none like following.

.tab-bottom-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none
}

And the use following jQuery. You missed the . before tab-bottom-content

$(".tab-bottom").mouseover(function(event){
    $(this).find(".tab-bottom-content").show(300);
}).mouseleave(function(e) {
    $(this).find(".tab-bottom-content").hide(300);
});

Upvotes: 1

Andrew
Andrew

Reputation: 46

You can set the opacity of the tab-bottom-content to 0 and then change it to 1 in its :hover pseudo-selector class so that the text appears when you hover over the tab-bottom-content div. You may even want to add a transition so that the opacity changes smoothly. Do this,

.tab-bottom-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid black;
  opacity: 0;
  transition: opacity .4s ease-in;
}

.tab-bottom-content:hover {
  opacity: 1
}

Check it out https://jsfiddle.net/5s1fv2a9/

Upvotes: 0

kanudo
kanudo

Reputation: 2219

You need '.' in this .find("tab-bottom-content")

$(".tab-bottom").on('mouseover',function(event){
    $(this).find(".tab-bottom-content").show(300);
});
$('.tab-bottom').on('mouseleave', function(e) {
    $(this).find(".tab-bottom-content").hide(300);
});

Here is the pen

You must also add CSS

.tab-bottom-content {
    display:none;
 }

or inline style to hide the 'tab-bottom-content' content first

Upvotes: 0

Philip G
Philip G

Reputation: 4104

I would solve this using CSS instead.

like this fiddle

Example html: 

<div class=tab-bottom>
  <div class=tab-bottom-content>
     Test
   </div>
</div>

CSS: 

.tab-bottom{
  border: 1px SOLID #F00; /* For display purpose */
  width: 200px;
  height: 200px;
}

.tab-bottom.tab-bottom-content{
  display: none;
}
.tab-bottom:hover .tab-bottom-content{
  display: block;
}

There is no need for JavaScript or jQuery here :)

Upvotes: 1

Related Questions