使用CSS/HTML + Transitions将图像悬停在图像上时如何显示div? [英] How to display a div when hovering over an image using CSS/HTML + Transitions?
问题描述
我正在尝试实现我无法弄清的两件事:
1)当我将鼠标悬停在图像上时如何显示div，理想情况下具有过渡效果.
2)当用户将鼠标从图像移到div本身时，如何使div停留.
到目前为止，这是我的代码；它没有过渡效果，除非div紧邻图像，否则当我将鼠标悬停在div上时它不会停留.
I'm trying to achieve two things I can't figure out:
1) How to display a div when I hover over an image, ideally with a transition effect.
2) How to make the div stay up when the user shifts the mouse from the image to the div itself.
Here's my code so far; it has no transition effect and unless the div is directly next to the image, it doesn't stay up when I mouse over to it.
<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>
P.S.很抱歉，如果我格式化不正确；我是该网站的新手.
P.S. I am sorry if I formatted anything incorrectly; I am brand new to the site.
推荐答案
hover 效果不适用于移动设备(尽管越来越多的悬停敏感"设备).为了适应大多数设备，我经常同时使用:hover 和:focus 来下拉"东西.但是这个需要可聚焦"元素，对此我通常使用< a> nchor标签.
The hover effect is not mobile-friendly (though there are more and more 'hover-sensitive' devices).
To accomodate most devices I often use both :hover and :focus to 'dropdown' things. However, this
requires 'focusable' elements, for which I usually use the <a>nchor tag.
但是首先:代码的重点是一致性，因为您要混合匹配 #content 和 id ="Content" 中的小写字母和大写字母.这就是为什么它无论如何都不起作用.
But first: The point in your code is consistency as you are mix-matching lowercase and uppercase in #content and id="Content". That is why it does not work anyway.
回答您的问题:
1)使大小写一致！
2)要创建具有持久性的悬停，请使用可聚焦的触发"元素触发内容"的显示
2) To create a hover with persistency, trigger the display of 'content' with a focusable 'trigger' element
悬停/单击时，外部< a> 保持焦点，因此可见其同级 #content .在鼠标悬停 .shorttext 时，将显示其同级 .longtext .
On hover/click the outer <a> stays focused and therefore its sibling #content visible.
On hover .shorttext its sibling .longtext will show.
在单击 .shorttext (实际上在 #content 中的任何位置)时，内容框将再次关闭，因为外部< a> 失去了焦点再次.
On click .shorttext (actually anywhere in #content) the content box will close again as the outer <a> loses focus again.
FYI-1，属性 display 不可设置动画，因此当需要在某些元素上进行过渡时，将需要一个替代方法.在这种情况下，将使用从0到1的 opacity (可选地将 width 和 height 的范围从0变为300px).
FYI-1, attribute display is not animatable, so you will need an alternative when you need a transition on some element. In this case opacity going from 0 to 1 is used (optionally combined with width and height, from 0 to 300px).
FYI-2，使用 href ="javascript:void(0)" 代替 href =#" 将防止浏览器在其历史记录日志中添加条目每次点击.
FYI-2, using href="javascript:void(0)" instead of href="#" will prevent browers from adding an entry in their history log each click.
FYI-3最终版本，默认情况下使用CSS类，它们是通用类，因此可以轻松复制HTML中的相同行为，而不必每次都重复CSS.ID是特定的，并且需要您一遍又一遍地复制相同的CSS.
FYI-3 final, use CSS classes by default, these are generic making it a lot easier to copy the same behaviour in your HTML, without repeating CSS each time. IDs are specific and require you to copy equal CSS over and over.
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>这篇关于使用CSS/HTML + Transitions将图像悬停在图像上时如何显示div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
