我似乎對應該是簡單的事情有困難。我不知道為什么我所做的不起作用，我想在鏈接懸停時出現一個元素，但完成后沒有任何反應。它僅在我要求元素在容器懸停時出現時有效，但不適用于鏈接。
.elementcontainer {
opacity: 0;
}
.cardtitle a:hover .elementcontainer {
opacity: 1;
}<div class="maxthumb">
<div class="card-body">
<div class="elementcontainer">
<p class="element">text1</p>
<p class="element">text2</p>
</div>
<h2 class="cardtitle">
<a class="text-white" href="http://...">Title</a>
</h2>
<p class="cardsub">text2</p>
</div>
</div>我基本上必須讓元素在鏈接懸停時出現，并帶有一個簡單的影片，如淡入或滑入，但到目前為止我什至無法讓它們出現在懸停時。
uj5u.com熱心網友回復：
他們不是兄弟姐妹，所以你不能使用兄弟姐妹選擇器
但是試試這個 javascript 代碼：onmouseenter ,onmouseleave 事件
function show(){document.getElementsByClassName('elementcontainer')[0].style.opacity="1";}
function hide(){document.getElementsByClassName('elementcontainer')[0].style.opacity="0";} .elementcontainer { opacity: 0; }<div class="maxthumb">
<div class="card-body">
<div class="elementcontainer">
<p class="element">text1</p>
<p class="element">text2</p>
</div>
<h2 class="cardtitle">
<a onmouseenter="show()" onmouseleave="hide()" class="text-white" href="http://...">Title</a>
</h2>
<p class="cardsub">text2</p>
</div>
</div>uj5u.com熱心網友回復：
我相信你需要使用 SASS 來嵌套 CSS
.cardtitle a:hover{
.elementcontainer {
opacity: 1;
}
}
或者您可以使用 JavaScript 將事件附加到懸停以更改 CSS 屬性。如上面的另一個答案所示。JQuery：https : //www.w3schools.com/jquery/event_hover.asp JavaScript mouseover：Javascript onHover 事件
uj5u.com熱心網友回復：
您可以在元素懸停時更改元素后的同級，但不能以相同的方式影響前一個同級。我重構了您的代碼以使其正常作業
.card-body {
opacity: 0;
}
.cardtitle:hover .card-body {
opacity: 1;
}<div class="maxthumb">
<h2 class="cardtitle">
<a class="text-white" href="http://...">Title</a>
</h2>
<div class="card-body">
<p class="element">text1</p>
<p class="element">text2</p>
</div>
<p class="cardsub">text2</p>
</div>uj5u.com熱心網友回復：
不確定它是否適用于懸停物件上方的元素，但如果您將鏈接放在上方，它應該可以作業。如果你想要下面的鏈接，我想你仍然可以在 css 中重新排列布局。
<div class="card-body">
<h2 class="cardtitle">
<a class="text-white" href="http://...">Title</a>
</h2>
<div class="elementcontainer">
<p class="element">text1</p>
<p class="element">text2</p>
</div>
<p class="cardsub">text2</p>
</div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/365882.html
標籤：javascript html css 杰基尔