顯示列表，當一個項目懸停

.show:hover .list-categories { 
 
    max-height: inherit; 
 
    opacity: 1; 
 
} 
 
.list-categories { 
 
    list-style-type: none; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    max-height: 0px; 
 
    opacity: 0; 
 
    overflow: hidden; 
 
    transition: opacity 300ms ease; 
 
}

<div class="show">show div</div> 
 
<ul class="list-categories"> 
 
    <li>Bed</li> 
 
    <li>Bed</li> 
 
    <li>Bed</li> 
 
    <li>Bed</li> 
 
    <li>Bed</li> 
 
    <li>Bed</li> 
 
</ul>

此代碼不起作用。我想顯示列表懸停在項目上時「.show」

如果您將交換機的形式（.show：hover + .list-categories）它的工作原理......但我不想加號。

如何在不使用加號的情況下更改此代碼？

來源

2017-01-23 Cristi

爲什麼你不希望使用相鄰兄弟選擇？這正是完成你想要做的事情的方式。 – Shaggy

由於根據你的CSS，你可以改變HTML像BELOW。

.show:hover ul.list-categories{ 
 
    max-height: inherit; 
 
    opacity: 1; 
 
} 
 

 
.list-categories{ 
 
    list-style-type: none; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    max-height: 0px; 
 
    opacity: 0; 
 
    overflow: hidden; 
 
    transition: opacity 300ms ease; 
 
}

<div class="show">show div 
 
<ul class="list-categories"> 
 
    <li>Bed</li> 
 
    <li>Bed</li> 
 
    <li>Bed</li> 
 
    <li>Bed</li> 
 
    <li>Bed</li> 
 
    <li>Bed</li> 
 
</ul> 
 
</div>

來源

2017-01-23 07:27:03

您需要使用相鄰同胞選擇+跡象，爲您引用檢查此鏈接https://www.w3.org/TR/CSS21/selector.html#adjacent-selectors

.show:hover + .list-categories{ 
 
    max-height: inherit; 
 
    opacity: 1; 
 
} 
 

 
.list-categories{ 
 
    list-style-type: none; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    max-height: 0px; 
 
    opacity: 0; 
 
    overflow: hidden; 
 
    transition: opacity 300ms ease; 
 
}

<div class="show">show div</div> 
 
<ul class="list-categories"> 
 
    <li>Bed</li> 
 
    <li>Bed</li> 
 
    <li>Bed</li> 
 
    <li>Bed</li> 
 
    <li>Bed</li> 
 
    <li>Bed</li> 
 
</ul>

來源

2017-01-23 07:20:09

確定，但不想使用選擇器來塑造它（.show：hover + .list-categories）...我想要另一個表格 – Cristi

@Cristi我不明白你能解釋我 –

只是代替你的CSS下面的CSS：

.show:hover+.list-categories{ 
    max-height: inherit; 
    opacity: 1; 
} 

.list-categories{ 
    list-style-type: none; 
    padding: 0px; 
    margin: 0px; 
    max-height: 0px; 
    opacity: 0; 
    overflow: hidden; 
    transition: opacity 300ms ease; 
}

來源

2017-01-23 07:21:53

與示例中相同的問題以上...我不希望選擇者使用「+」 – Cristi

哦！ OK，然後添加你UL到您的div像我下面的代碼：

show div

和css低於： .show：懸停.LIST類別{ 最大高度：繼承; 不透明度：1; } .list-categories { list-style-type：none; padding：0px; margin：0px; max-height：0px; 不透明度：0; 溢出：隱藏; 過渡：不透明300ms緩解; } –

檢查此鏈接https://jsfiddle.net/fatehjagdeo/9way7qc2/ –

有沒有你不想要的加號，特別的原因？用你的HTML是不可能的。如果你真的不想要它，請使用這個html。

<div class="show">show div 
<ul class="list-categories"> 
    <li>Bed</li> 
    <li>Bed</li> 
    <li>Bed</li> 
    <li>Bed</li> 
    <li>Bed</li> 
    <li>Bed</li> 
</ul> 
    </div>

來源

2017-01-23 07:28:03 mok

+將選擇被.show和~後立即置於所有.list-categories將選擇由.show前面所有.list-categories。

.show:hover ~ .list-categories{ 
 
    max-height: inherit; 
 
    opacity: 1; 
 
} 
 

 
.list-categories{ 
 
    list-style-type: none; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    max-height: 0px; 
 
    opacity: 0; 
 
    overflow: hidden; 
 
    transition: opacity 300ms ease; 
 
}

<div class="show">show div</div> 
 
<ul class="list-categories"> 
 
    <li>Bed</li> 
 
    <li>Bed</li> 
 
    <li>Bed</li> 
 
    <li>Bed</li> 
 
    <li>Bed</li> 
 
    <li>Bed</li> 
 
</ul>

來源

2017-01-23 07:29:37

顯示列表，當一個項目懸停

回答

相關問題