Question

这是我拥有的代码

<div class="pageNav">
    <div class="pageNav-elements main-part">
        <span>Home</span>
        <span class="Promos">Promotions</span>
        <span class="Pokerrooms">Poker rooms</span>
    </div>
    <div class="Promos-tab hidden">
        <span>Races</span>
        <span>Freerolls</span>
    </div>
    <div class="Pokerrooms hidden">
        <span>Poker888</span>
        <span>FullTiltPoker</span>
    </div>
</div>

我想要的是悬停在.Promos元素上时公开.Promos-tab.hidden元素，而悬停在.Pokerrooms上时公开.Pokerrooms.hidden。

什么是非常重要的，我不想更改代码结构！

Answer 1

首先想到的是使用JavaScript / Jquery显示元素：

$(".Promos").hover(
  function(){
    $(".Promos-tab").css("display", "block");
  },
  function(){
    $(".Promos-tab").css("display", "none");
  });
$(".Pokerrooms").hover(
  function(){
    $(".Pokerrooms-tab").css("display", "block");
  },
  function(){
    $(".Pokerrooms-tab").css("display", "none");
  });

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pageNav">
    <div class="pageNav-elements main-part">
        <span>Home</span>
        <span class="Promos">Promotions</span>
        <span class="Pokerrooms">Poker rooms</span>
    </div>
    <div class="Promos-tab hidden">
        <span>Races</span>
        <span>Freerolls</span>
    </div>
    <div class="Pokerrooms-tab hidden">
        <span>Poker888</span>
        <span>FullTiltPoker</span>
    </div>
</div>

但是我建议您应该适当地将代码结构更改为类似的形式，这样，如果您打算这样做，您实际上可以按“下拉”链接：

https://www.w3schools.com/howto/howto_css_dropdown.asp

如何使用CSS将鼠标悬停在另一个元素上时公开div元素

1 个答案: