我試圖實(shí)現(xiàn)兩件我無(wú)法弄清楚的事情：1）當(dāng)我將鼠標(biāo)懸停在圖像上時(shí)如何顯示 div，最好具有過(guò)渡效果。2）當(dāng)用戶將鼠標(biāo)從圖像移動(dòng)到div本身時(shí)，如何使div保持不動(dòng)。到目前為止，這是我的代碼；它沒有過(guò)渡效果，除非 div 直接位于圖像旁邊，否則當(dāng)我將鼠標(biāo)懸停在圖像上時(shí)，它不會(huì)保持不變。<style>#Picture {position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; margin: auto;width: 375px;height: 375px;}#content {display: none;position: fixed; left: -800px; right: 0px; top: 0px; bottom: 0px; margin: auto;width: 300px;height: 300px;background-color: #7377a8;}#Picture:hover + #content {display: block;}#content:hover {display:block;}</style><body><img src="" alt="Picture" id="Picture" /><div id="Content">Something goes here</div></body>PS 如果我的格式有誤，我很抱歉；我是該網(wǎng)站的新手。
3 回答
森林海
TA貢獻(xiàn)2011條經(jīng)驗(yàn) 獲得超2個(gè)贊
該hover效果不適合移動(dòng)設(shè)備（盡管有越來(lái)越多的“懸停敏感”設(shè)備）。為了適應(yīng)大多數(shù)設(shè)備，我經(jīng)常使用:hover和:focus來(lái)“下拉”東西。然而，這需要“可聚焦”元素，為此我通常使用<a>nchor 標(biāo)簽。
#content但首先：代碼中的要點(diǎn)是一致性，因?yàn)槟赼nd中混合匹配小寫和大寫id="Content"。這就是為什么它無(wú)論如何都不起作用的原因。
回答您的問(wèn)題：
1）大小寫一致！
2) 要?jiǎng)?chuàng)建具有持久性的懸停，請(qǐng)使用可聚焦的“觸發(fā)”元素觸發(fā)“內(nèi)容”的顯示
懸停/單擊時(shí)，外部<a>保持聚焦，因此其同級(jí)#content可見。懸停時(shí)將顯示.shorttext其同級(jí)。.longtext
單擊時(shí).shorttext（實(shí)際上是 中的任何位置#content），內(nèi)容框?qū)⒃俅侮P(guān)閉，因?yàn)橥獠?lt;a>再次失去焦點(diǎn)。
FYI-1，屬性display不可設(shè)置動(dòng)畫，因此當(dāng)您需要在某些元素上進(jìn)行轉(zhuǎn)換時(shí)，您將需要替代方案。在這種情況下opacity，使用從 0 到 1（可以選擇與width和組合height，從 0 到 300px）。
FYI-2，使用href="javascript:void(0)"代替href="#"將阻止瀏覽器在每次點(diǎn)擊的歷史日志中添加條目。
FYI-3 最終版，默認(rèn)使用 CSS 類，這些類是通用的，可以更輕松地在 HTML 中復(fù)制相同的行為，而無(wú)需每次都重復(fù) CSS。ID 是特定的，需要您一遍又一遍地復(fù)制相同的 CSS。
a {
color: currentColor;
text-decoration: none
}
.picture {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
width: 375px;
height: 375px;
}
.content {
/* display: none; remove */
opacity: 0; /* add */
transition: all 150ms ease-in-out; /* add */
position: fixed;
left: -800px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
width: 0; /* [OPTIONAL] modify from 300px */
height: 0; /* ditto */
background-color: #7377a8;
}
.trigger:hover+.content,
.trigger:focus+.content {
/* add, for persistent display of content. click elsewhere to close again */
/* display: block; remove */
opacity: 1; /* add */
width: 300px; /* [OPTIONAL] add, see above */
height: 300px;
}
.shorttext { /* eye-candy only */
width: 100%;
text-align: center
}
.longtext {
display: none
}
.shorttext:hover+.longtext {
display: block;
}
/* little debug helper */
[outlines="1"] * {
outline: 1px dashed purple
}
<body outlines="0">
<a class="trigger" href="javascript:void(0)"><img src="https://picsum.photos/300?random=1" alt="Picture" class="picture" /></a>
<div class="content">
<h3 class="shorttext">short intro text, hover me</h3>
<p class="longtext">Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
deleniti copiosae.</p>
</div>
</body>
ABOUTYOU
TA貢獻(xiàn)1812條經(jīng)驗(yàn) 獲得超5個(gè)贊
你的代碼實(shí)際上非常有效。你的問(wèn)題是圖片和div不相鄰。只要將它們并排移動(dòng)就可以了。
你的 div 的 id 是Content，在 CSS 中是content。在某些瀏覽器中，ID 區(qū)分大小寫，因此這可能是另一個(gè)問(wèn)題。
我使用不透明度而不是顯示來(lái)使過(guò)渡工作。
這是我的代碼：
#picture {
position: fixed;
left: 0px;
top: 0px;
width: 200px;
height: 200px;
}
#content {
opacity: 0;
position: fixed;
left: 200px;
top: 0px;
width: 200px;
height: 200px;
background-color: #7377a8;
transition: opacity .5s;
}
#picture:hover + #content {
opacity: 1;
}
#content:hover {
opacity: 1;
}
<img src="" alt="Picture" id="picture" />
<div id="content">
Something goes here
</div>
德瑪西亞99
TA貢獻(xiàn)1770條經(jīng)驗(yàn) 獲得超3個(gè)贊
簡(jiǎn)單的技巧是將圖像和內(nèi)容都放在div中。
超文本標(biāo)記語(yǔ)言
<div class="container">
<img src="img.jpg" alt="image" class="container__img">
<p class="container__content">
Something goes here
</p>
</div>
CSS
.container {
width: 300px;
height: auto;
overflow: hidden;
}
.container__img {
width: 100%;
object-fit: cover;
}
.container_content {
transform: translateX(-100%);
transition: transform .5s;
}
.container:hover > .container__content {
transform: translateX(0);
}
如果您不希望在顯示之前占用空間，請(qǐng)更改內(nèi)容的顯示屬性。 詢問(wèn)是否有不清楚的地方。
- 3 回答
- 0 關(guān)注
- 144 瀏覽
添加回答
舉報(bào)
0/150
提交
取消