HTML CSS Class Selector

Question

I need help on understanding the class selector code. Currently I have these:

<div class="tt-news">
    <div class="tt-news-top">
        <a class="tt-news-img custom-hover" href="http://www.cfbtvideos.org/cfbt/2017/10/11/puppet-workshop/"><img alt="" class="img-responsive wp-post-image" height="168" sizes="(max-width: 360px) 100vw, 360px" src="http://www.cfbtvideos.org/cfbt/wp-content/uploads/2017/10/Article-2.jpg" srcset="http://www.cfbtvideos.org/cfbt/wp-content/uploads/2017/10/Article-2.jpg 750w, http://www.cfbtvideos.org/cfbt/wp-content/uploads/2017/10/Article-2-300x140.jpg 300w" width="360"></a>
        <div class="tt-news-date" style="display: block;">
            <span>11</span> Oct
        </div>
    </div>
    <div class="tt-news-label">
        <span>By: <a>cfbt admin</a></span>
    </div><a class="tt-news-title c-h6" href="http://www.cfbtvideos.org/cfbt/2017/10/11/puppet-workshop/" style="display: block;">Puppet Workshop</a>
    <div class="simple-text size-4">
        &nbsp; An optional PD session entitled “Making a Bruneian Student Finger Puppet” was held on Wednesday ...
    </div>

Im trying to show the .tt-news-date span and .tt-news-label .tt-news-title on hovering the .custom-hover

Right now, I have this code:

jQuery(document).ready( function( $ ) {
var posthover = $(".custom-hover.custom-hover");

$(posthover).hover( function() {
$(".tt-news-date").css("display", "block");
$(".tt-news-title").css("display", "block");
});

});

But this will show all of the title and date on hovered. I just need to show the closest to the one's I hovered. How do I do this?

You can use the .closest() jQuery method.

Obsidian Age
– Obsidian Age

2018-02-22 02:40:00 +00:00
Commented Feb 22, 2018 at 2:40 — Obsidian Age
– Obsidian Age, Commented Feb 22, 2018 at 2:40

Intervalia · Accepted Answer · 2018-02-22 15:43:02Z

2

Why use jQuery for something that can be done solely with CSS.

The code below will only show the sections .tt-news-date span and .tt-news-title when you hover over the section .tt-news.

I know it isn't exactly what you want, but it should work close enough that you no longer need JavaScript to do it.

.tt-news:not(:hover) .tt-news-date,
.tt-news:not(:hover) .tt-news-title {
  display: none;
}

<div class="tt-news">
  <div class="tt-news-top">
    <a class="tt-news-img custom-hover" href="http://www.cfbtvideos.org/cfbt/2017/10/11/puppet-workshop/"><img alt="" class="img-responsive wp-post-image" height="168" sizes="(max-width: 360px) 100vw, 360px" src="http://www.cfbtvideos.org/cfbt/wp-content/uploads/2017/10/Article-2.jpg" srcset="http://www.cfbtvideos.org/cfbt/wp-content/uploads/2017/10/Article-2.jpg 750w, http://www.cfbtvideos.org/cfbt/wp-content/uploads/2017/10/Article-2-300x140.jpg 300w" width="360"></a>
    <div class="tt-news-date">
      <span>11</span> Oct
    </div>
  </div>
  <div class="tt-news-label">
    <span>By: <a>cfbt admin</a></span>
  </div>
  <a class="tt-news-title c-h6" href="http://www.cfbtvideos.org/cfbt/2017/10/11/puppet-workshop/">Puppet Workshop</a>
  <div class="simple-text size-4">
    &nbsp; An optional PD session entitled “Making a Bruneian Student Finger Puppet” was held on Wednesday ...
  </div>
</div>

UPDATE

If you wanted to do it with jQuery you can simplify your code as follows:

$(document).ready(
  function() {
    $('.custom-hover').mouseenter(
      function() {
        $('.tt-news-date,.tt-news-title').css('display', 'block');
      }
    ).mouseleave(
      function() {
        $('.tt-news-date,.tt-news-title').css('display', '');
      }
    );
  }
);

.tt-news-date, .tt-news-title {
  display: none;
}
.tt-news-img img {
  background-color: #444;
  min-height: 20px;
  min-width: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tt-news">
  <div class="tt-news-top">
    <a class="tt-news-img custom-hover" href="http://www.cfbtvideos.org/cfbt/2017/10/11/puppet-workshop/"><img alt="" class="img-responsive wp-post-image" height="168" sizes="(max-width: 360px) 100vw, 360px" src="http://www.cfbtvideos.org/cfbt/wp-content/uploads/2017/10/Article-2.jpg" srcset="http://www.cfbtvideos.org/cfbt/wp-content/uploads/2017/10/Article-2.jpg 750w, http://www.cfbtvideos.org/cfbt/wp-content/uploads/2017/10/Article-2-300x140.jpg 300w" width="360"></a>
    <div class="tt-news-date">
      <span>11</span> Oct
    </div>
  </div>
  <div class="tt-news-label">
    <span>By: <a>cfbt admin</a></span>
  </div>
  <a class="tt-news-title c-h6" href="http://www.cfbtvideos.org/cfbt/2017/10/11/puppet-workshop/">Puppet Workshop</a>
  <div class="simple-text size-4">
    &nbsp; An optional PD session entitled “Making a Bruneian Student Finger Puppet” was held on Wednesday ...
  </div>
</div>

Make sure to handle both mouseenter and mouseleave to show and hide the special data.

The image was not loading for me so I needed to set its width and height so I had something to hover over. The CSS related to that is strictly for testing.

edited Feb 22, 2018 at 15:43

answered Feb 22, 2018 at 3:01

Intervalia

11.1k2 gold badges35 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shukri Damit Over a year ago

Sorry, question, It can be done in CSS, but may I know how do I do it in jQuery? I wanted to see the difference on how to implement it in both way.

Intervalia Over a year ago

See the update I added. You can't just use hover unless you don't want the special content to stay showing once you hovered over the trigger element. If you want it to go away once you move away from the trigger element then you need to use mouseleave as well.

Shukri Damit Over a year ago

Got it! That's what I noticed. The content stayed there after I hovered it. I thought it would be the same as the "hover" in CSS where it would disappear after I hovered off the element.

Morganster · Accepted Answer · 2018-02-22 11:36:07Z

0

hello as @intervalia said is better with pure css, but to do it in JQuery in your question you have some issues, the item have a inline style 'style="display: block;"' maybe you intention is these elements where not visible so add a class for make them 'display: none', and your selector is wrong change var posthover = $(".custom-hover.custom-hover"); for var posthover = $(".custom-hover");

$(function() {
    var posthover = $(".custom-hover");

    $(posthover).hover( function() {
        $(".tt-news-date").css("display", "block");
        $(".tt-news-title").css("display", "block");
    });
});

example

hope it helps.

edited Feb 22, 2018 at 11:36

answered Feb 22, 2018 at 3:08

Morganster

3112 silver badges7 bronze badges

Collectives™ on Stack Overflow

HTML CSS Class Selector

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related