如何使用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

回答

相關問題