如何使用 css 为下一个 div 赋予悬停效果

Question

我想为特定 div 赋予悬停效果，但 div 不是我悬停 div 的子项

我有代码，所以，你可以理解

$(".pannel-icon").click(function(){
    $(".opening-menu").toggleClass('show');
});

body{overflow:hidden}
a{cursor:pointer}
.opening-menu{float:right;position:absolute;right:-100px; top: 50px;transition:0.2s all linear}
.main-menu{float:right}
.show{right:0;transition:0.2s all linear}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div class="main-menu">
  <span>coins:0</span>
  <a class="pannel-icon">
    <span class="pannel-menu-hover">Menu</span>
  </a>
</div>
<div class="opening-menu">
  <ul>
    <li>menu1</li>
    <li>menu1</li>
    <li>menu1</li>
    <li>menu1</li>
  </ul>
</div>

在此代码中，我想在悬停 .pannel-icon 时悬停 .opening-menu。

Answer 1

您可以使用 jquery 悬停功能或选择器来实现此目的。但我更喜欢将 opening-menu 放在 link 中。这样，当您将鼠标悬停在菜单中的某个项目时，它始终会悬停。

Answer 2

如果我没理解错你的问题，你想更改名为 opening-menu 的 class 中的 CSS 属性吗？

因此，您可以在 CSS 中添加：

.opening-menu:hover{float:right;position:absolute;right:-100px; top: 50px;transition:0.2s all linear}

完整的 CSS 代码为：

body{overflow:hidden}
a{cursor:pointer}
.opening-menu:hover{float:right;position:absolute;right:-100px; top: 50px;transition:0.2s all linear}
.main-menu{float:right}
.show:hover{right:0;transition:0.2s all linear}

或者，您可以使用这样的 javascript 函数：

    $(".pannel-icon").hover(hoverDiv);

    function hoverDiv(){
    $(".opening-menu").css({
    'float':'right';
    'position':'absolute';
    'right':'-100px'; 
    'top': '50px';
    'transition':'0.2s'}) 
}

Answer 3

这是你的答案吗？

$(".pannel-icon, .opening-menu").hover(function(){
    $(".opening-menu").toggleClass('show');
});

body{overflow:hidden}
a{cursor:pointer}
.opening-menu{float:right;position:absolute;right:-100px; top: 10px;transition:0.2s all linear}
.main-menu{float:right}
.show{right:0;transition:0.2s all linear}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div class="main-menu">
  <span>coins:0</span>
  <a class="pannel-icon">
    <span class="pannel-menu-hover">Menu</span>
  </a>
</div>
<div class="opening-menu">
  <ul>
    <li>menu1</li>
    <li>menu1</li>
    <li>menu1</li>
    <li>menu1</li>
  </ul>
</div>

Answer 4

我想我明白你在说什么，请查看此 Fiddle：https://jsfiddle.net/nhnb9a5g/1/。如果将鼠标悬停在菜单上，菜单会出现，但在您尝试单击某个项目后会立即消失？

如果是，请检查此修改后的 fiddle：https://jsfiddle.net/zm93hL3e/3/

添加以下内容jQuery：

$(".pannel-icon, .opening-menu").hover(function(){
    $(".opening-menu").toggleClass('show');
});

如何使用 css 为下一个 div 赋予悬停效果

How to give hover effect to next div using css

html

css

hover