我試圖實現兩件我無法弄清楚的事情：1）當我將鼠標懸停在圖像上時如何顯示 div，最好具有過渡效果。2）當用戶將鼠標從圖像移動到div本身時，如何使div保持不動。到目前為止，這是我的代碼；它沒有過渡效果，除非 div 直接位于圖像旁邊，否則當我將鼠標懸停在圖像上時，它不會保持不變。<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 如果我的格式有誤，我很抱歉；我是該網站的新手。
3 回答
森林海
TA貢獻2011條經驗 獲得超2個贊
該hover效果不適合移動設備（盡管有越來越多的“懸停敏感”設備）。為了適應大多數設備，我經常使用:hover和:focus來“下拉”東西。然而，這需要“可聚焦”元素，為此我通常使用<a>nchor 標簽。
#content但首先：代碼中的要點是一致性，因為您在and中混合匹配小寫和大寫id="Content"。這就是為什么它無論如何都不起作用的原因。
回答您的問題：
1）大小寫一致！
2) 要創建具有持久性的懸停，請使用可聚焦的“觸發”元素觸發“內容”的顯示
懸停/單擊時，外部<a>保持聚焦，因此其同級#content可見。懸停時將顯示.shorttext其同級。.longtext
單擊時.shorttext（實際上是 中的任何位置#content），內容框將再次關閉，因為外部<a>再次失去焦點。
FYI-1，屬性display不可設置動畫，因此當您需要在某些元素上進行轉換時，您將需要替代方案。在這種情況下opacity，使用從 0 到 1（可以選擇與width和組合height，從 0 到 300px）。
FYI-2，使用href="javascript:void(0)"代替href="#"將阻止瀏覽器在每次點擊的歷史日志中添加條目。
FYI-3 最終版，默認使用 CSS 類，這些類是通用的，可以更輕松地在 HTML 中復制相同的行為，而無需每次都重復 CSS。ID 是特定的，需要您一遍又一遍地復制相同的 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貢獻1812條經驗 獲得超5個贊
你的代碼實際上非常有效。你的問題是圖片和div不相鄰。只要將它們并排移動就可以了。
你的 div 的 id 是Content，在 CSS 中是content。在某些瀏覽器中，ID 區分大小寫，因此這可能是另一個問題。
我使用不透明度而不是顯示來使過渡工作。
這是我的代碼：
#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貢獻1770條經驗 獲得超3個贊
簡單的技巧是將圖像和內容都放在div中。
超文本標記語言
<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);
}
如果您不希望在顯示之前占用空間，請更改內容的顯示屬性。 詢問是否有不清楚的地方。
- 3 回答
- 0 關注
- 145 瀏覽
添加回答
舉報
0/150
提交
取消