Question

在Wordpress网站中，我有以下代码，但将鼠标悬停在.insightdesign_text_reveal上并未显示.insightdesign_text_reveal_description。

帮助表示赞赏。

<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>

Answer 1

您只能使用css来执行此操作

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

Answer 2

一对语法错误。试试这种方式。

＆＃13;

jQuery(".insightdesign_text_reveal").hover(function() {
  jQuery(this).find(".insightdesign_text_reveal_description").show();
}, function() {
  jQuery(this).find(".insightdesign_text_reveal_description").hide();
});

＆＃13;

.insightdesign_text_reveal_description {
  display: none;
}

＆＃13;

<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>

＆＃13;

悬停在父级上显示隐藏的孩子

2 个答案: