HTML CSS类选择器

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?

Answer 1

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.

Answer 2

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.