【发布时间】：2017-05-05 07:31:47
【问题描述】：
总结
- 目标设备（设备宽度+600px - 请忽略 移动/xs 屏幕）
-
纯 CSS 图片显示
:hover:after - 有效但不理想
-
问题：
- 图像比例（图像将为 800px/600px） 未保持 - 宽度被裁剪而不是图像被缩小
- 图像在主容器之外
.outercontainer -
:hover上的图像淡入 有效，但在:hover状态为 后它确实不淡出终止我尝试使用单独的动画/相同的动画倒退没有运气
想要的效果：
所有东西都装在带有蓝色边框的容器中
.outercontainer编辑：图像应该有自己的空间 - 大约 80% 的容器 宽度和选项/菜单将是另外 20% - 没有重叠 （如果图像重叠在选项上，平板电脑用户将陷入：悬停状态）
.outercontainer里面的一切都根据屏幕调整 宽度希望支持的最小设备宽度为 600 像素（忽略小于 600 像素的屏幕）
-
步骤：
- 图像淡入
:hover - 只要元素仍在
:hover中，图像就保持可见 - 元素“未悬停”后图像淡出
- 图像淡入
类似的帖子/问题
Scale image inside div up AND/OR down to fit largest side of image with CSS（将图像作为元素而不是伪元素的背景）
can't get image to fit inside a div（与上面的链接相同）
Scale all images to fit container proportionally（地址为 元素的背景，而不是元素的背景 :伪元素之后)
SO 上还有更多类似的问题。我还没有找到一个解决图像作为 :after 伪元素背景的图像
我的问题
-
如何将 :hover:after 显示的图像放入其父容器中？ （我希望它占用不超过该容器宽度的 80%-85% - 其余空间应分配给选项/菜单/列表项）
如何使用 :hover:after responsive 显示图像？
如何让元素在取消悬停后淡出？
我的CSS和HTML在下面的sn-p中（不完全响应-请全屏打开）
/* Start Miscellaneous stuff */
body {
background: #131418;
color: #999;
text-align: center;
}
.optionlist a {
color: #999;
text-decoration: none;
}
@keyframes mycoolfade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* End Miscellaneous stuff */
.outercontainer {
border: 1px solid blue; /*This needs to be in the middle of the screen and everthing should fit inside it*/
position: fixed; /*border to highlight only - not part of final product*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 1200px;
max-width: 80%
}
.optioncontainer {
width: 250px;
max-width: 20vw;
}
.optionlist li {
background: #fff;
padding: .5em;
box-shadow: inset 10px 10px 100px 25px rgba(0, 0, 0, .8);
list-style-type: none;
}
.optionlist li:nth-child(odd) {
background: #000;
}
.optionlist li:hover {
background: red;
}
.optionlist li:hover:after { /* The part the needs to be fixed */
content: '';
width: 800px;
height: 600px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: mycoolfade 1s;
}
/* Start Background Control */
#red:after {background: url(http://lorempixel.com/800/600/)}
#blue:after {background: url(http://lorempixel.com/800/601/)}
#green:after {background: url(http://lorempixel.com/801/600/)}
#yellow:after {background: url(http://lorempixel.com/801/601/)}
#orange:after {background: url(http://lorempixel.com/799/600/)}
#white:after {background: url(http://lorempixel.com/800/599/)}
#black:after {background: url(http://lorempixel.com/801/599/)}
/* End Background Control */<body>
The initial hiccup when the images load is not an issue
<div class="outercontainer">
<div class="optioncontainer">
<div class="optionlist">
<li id="red">Red</li>
<li id="blue">Blue</li>
<li id="green">Green</li>
<li id="yellow">Yellow</li>
<li id="orange">Orange</li>
<li id="white">White</li>
<li id="black">Black</li>
</div>
</div>
</div>
</body>谢谢。
【问题讨论】：
-
赞成以完美而详细的方式提出关于 SO 的问题
-
关注这个问题！