![](/img/trans.png)
[英]Style hover state of element when hovering over overlapping elements with CSS
[英]hovering over elements triggering another element hover. What is the problem?
相關html:
<div class="bottom-page">
<p>What is <span class="carmeet">CarMeet?</span></p>
</div>
<div class="definitions">
<span class="n1"><p><span class="carmeet1">CarMeet</span> is the number
one website for fans of cars, and car enthusiasts alike.</p></span>
<span class="n2"><p><span class="style2">Find</span> riders in your
local area, state, region, or country. <span class="style2">Cruise</span>
along.</p>
<span class="n3"><p><span class="style2">Create</span> and <span
class="style2">Join</span> crews to drift along with. Stay up-to-date with
your group <span class="style2">Online</span> or on <span
class="style2">Adventures</span>.</p></span>
<span class="n4"><p>Actively<span class="style2"> engage</span> in the
community through the online <span class="style2">forum</span>.</p></span>
<span class="n5"><p><span class="style2">Coast</span> through countless
<span class="style2">news articles</span> to find out what else is
happening in
the <span class="style2">world of automobiles</span>, and find what's
available
on the <span class="style2">market</span>.</p></span>
</div>
</div>
相關css;
.n1:hover {
outline-style: solid;
background-color: lightgreen;
opacity: 0.8;
color: black;
}
.n2:hover {
outline-style: solid;
background-color: lightblue;
opacity: 0.8;
color: black;
}
.n3:hover {
outline-style: solid;
background-color: lightcoral;
opacity: 0.8;
color: black;
}
.n4:hover {
outline-style: solid;
background-color: lightyellow;
opacity: 0.8;
color: black;
}
.n5:hover {
outline-style: solid;
background-color: #9558a0;
opacity: 0.8;
color: black;
}
我確信關於同一件事還有一百個其他問題,但我似乎找不到一個對我的案子有幫助的問題。 當我將鼠標懸停在 n3-n5 上時,它會觸發 n2。 懸停 n1 時不會發生這種情況。 非常感謝,很抱歉成為菜鳥。
n5
、 n4
和n3
在它們的孩子中都使用 class style2
。 為每個子跨度創建不同的類以具有單獨的懸停效果。
不關閉<span class="n2">
上的 span 標簽
<span class="n2"><p><span class="style2">Find</span> riders in your
local area, state, region, or country. <span class="style2">Cruise</span>
along.</p></span>
您在第二個中缺少一個關閉跨度:
我已經完成了更改,請同時檢查 make span display:block;
<div class="bottom-page">
<p>What is <span class="carmeet">CarMeet?</span></p>
</div>
<div class="definitions">
<span class="n1"><p><span class="carmeet1">CarMeet</span> is the number
one website for fans of cars, and car enthusiasts alike.</p></span>
<span class="n2"><p><span class="style2">Find</span> riders in your
local area, state, region, or country. <span class="style2">Cruise</span>
along.</p></span>
<span class="n3"><p><span class="style2">Create</span> and <span
class="style2">Join</span> crews to drift along with. Stay up-to-date with
your group <span class="style2">Online</span> or on <span
class="style2">Adventures</span>.</p></span>
<span class="n4"><p>Actively<span class="style2"> engage</span> in the
community through the online <span class="style2">forum</span>.</p></span>
<span class="n5"><p><span class="style2">Coast</span> through countless
<span class="style2">news articles</span> to find out what else is
happening in
the <span class="style2">world of automobiles</span>, and find what's
available
on the <span class="style2">market</span>.</p></span>
</div>
</div>
.definitions > span {
display: block;
}
.n1:hover {
outline-style: solid;
background-color: lightgreen;
opacity: 0.8;
color: black;
}
.n2:hover {
outline-style: solid;
background-color: lightblue;
opacity: 0.8;
color: black;
}
.n3:hover {
outline-style: solid;
background-color: lightcoral;
opacity: 0.8;
color: black;
}
.n4:hover {
outline-style: solid;
background-color: lightyellow;
opacity: 0.8;
color: black;
}
.n5:hover {
outline-style: solid;
background-color: #9558a0;
opacity: 0.8;
color: black;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.