如何使用CSS

我想给悬停效果，以特定的div给悬停效果到下一格，但该分区是不是DIV的孩子，这是我悬停如何使用CSS

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

$(".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:$100</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>

这里面的代码，我想悬停.opening-menu当我将鼠标悬停.pannel-icon。

来源

2016-01-13 Shurvir Mori

它是你的答案吗？

$(".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:$100</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>

来源

2016-01-13 11:14:17

谢谢你的回答。它的工作;-) –

但是，如果你尝试点击一个菜单项，菜单消失？只要不将鼠标悬停在菜单文字上，它就会消失？ –

@david我更新了它。因为你的兄弟应该留在那个地方，因为这个菜单应该点击。 –

你可以使用jQuery的悬停功能或选择器来实现这一点。但我更愿意将链接中的开局菜单。这样，当您在菜单中悬停项目时，它总是悬停。

来源

2016-01-13 11:02:12 Ben

这应该是一个评论。无论如何，谢谢回答 –

如果我已经正确理解您的问题，是否要更改名为opening-menu的类中的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'}) 
}

来源

2016-01-13 11:09:08

我想我明白你说什么，看看这个小提琴：https://jsfiddle.net/nhnb9a5g/1/。如果将鼠标悬停在菜单上，菜单会出现，但只要尝试点击某个项目就会消失？

如果是这样，看看这个修订小提琴：https://jsfiddle.net/zm93hL3e/3/

添加下面的jQuery：

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

来源

2016-01-13 11:18:05

如何使用CSS

回答

相关问题