CODEWITHSUNDEEP
jquery
Steve
Steve

Reputation: 1765

Hover on parent shows hidden child

In a Wordpress site I have the following code, but hovering over .insightdesign_text_reveal does not reveal .insightdesign_text_reveal_description.

Help appreciated.

<script>
    jQuery(document).ready(function() {
        jQuery(".insightdesign_text_reveal").hover(function(){
            jQuery(this).find(".insightdesign_text_reveal_description").show();
        } function(){
            jQuery(this).find(".insightdesign_text_reveal_description").hide(); 
        };
    });
</script>
<style>
    .insightdesign_text_reveal_description {
        display: none;
    }
</style>
<div class="et_pb_module insightdesign_text_reveal insightdesign_text_reveal_0 et_pb_bg_layout_light clearfix ">
    <h3 class="et_pb_module_header">History</h3>
    <div class="insightdesign_text_reveal_description">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.</p>
    </div> <!-- .et_pb_team_member_description -->
</div>

Upvotes: 0

Views: 37

Answers (2)

4b0
4b0

Reputation: 22323

Couple of Syntax error. Try this way.

jQuery(".insightdesign_text_reveal").hover(function() {
  jQuery(this).find(".insightdesign_text_reveal_description").show();
}, function() {
  jQuery(this).find(".insightdesign_text_reveal_description").hide();
});
.insightdesign_text_reveal_description {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="et_pb_module insightdesign_text_reveal insightdesign_text_reveal_0 et_pb_bg_layout_light clearfix ">
  <h3 class="et_pb_module_header">History</h3>
  <div class="insightdesign_text_reveal_description">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.</p>
  </div>
  <!-- .et_pb_team_member_description -->
</div>

Upvotes: 1

Ryuk Lee
Ryuk Lee

Reputation: 744

You can use only css to do it

.insightdesign_text_reveal_description {
    display: none;
}
.et_pb_module_header:hover + .insightdesign_text_reveal_description{
      display: unset;
}

Upvotes: 3

Related Questions