在<a> hover

Question

The HTML structure of the header is not ideal, but cannot be changed at this time.

Here is the HTML:

    <nav>
        <a href="">About</a>
        <a class="speakingdropbtn" href="">Speaking</a>
        <div class="speakingdropdown">
            <a href="" style="text-indent:25px;">Assemblies</a>
            <a href="" style="text-indent:25px;">Religious</a>
            <a href="" style="text-indent:25px;">Corporate</a>
        </div>
        <a href="">Products</a>
        <a href="">Media</a>
        <a href="">Contact</a>
        <a href="">Blog</a>
    </nav>

I'm trying to make it display the div with the class "speakingdropdown" when I hover over the anchor tag with the class "speakingdropbtn"

What CSS or JS or JQuery would I need to use to make that happen? I can post CSS, but there's a ton of it because the whole header is fully responsive.

Answer 1

您可以使用css相邻的兄弟选择器+，:hover伪类

＆＃13;

＆＃13;

div.speakingdropdown {
  display: none;
}

a.speakingdropbtn:hover + div.speakingdropdown {
  display: block;
}

＆＃13;

<nav>
  <a href="">About</a>
  <a class="speakingdropbtn" href="">Speaking</a>
  <div class="speakingdropdown">
    <a href="" style="text-indent:25px;">Assemblies</a>
    <a href="" style="text-indent:25px;">Religious</a>
    <a href="" style="text-indent:25px;">Corporate</a>
  </div>
  <a href="">Products</a>
  <a href="">Media</a>
  <a href="">Contact</a>
  <a href="">Blog</a>
</nav>

＆＃13;

＆＃13;

＆＃13;

Answer 2

$('.speakingdropbtn').hover(function() {
  $('.speakingdropdown').show();
},
function() {
  $('.speakingdropdown').hide();
});

Answer 3

没有任何css样式，这是最基本的实现。我们隐藏下拉列表，然后在悬停时我们使用jQueries .show（）方法。

$(".speakingdropbtn").hover(function(){
  $(".speakingdropdown").show()
})

.speakingdropdown {display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
        <a href="">About</a>
        <a class="speakingdropbtn" href="">Speaking</a>
        <div class="speakingdropdown">
            <a href="" style="text-indent:25px;">Assemblies</a>
            <a href="" style="text-indent:25px;">Religious</a>
            <a href="" style="text-indent:25px;">Corporate</a>
        </div>
        <a href="">Products</a>
        <a href="">Media</a>
        <a href="">Contact</a>
        <a href="">Blog</a>
    </nav>