Question

摘要

目标设备（设备宽度 + 600px - 请忽略 移动/ xs屏幕）
纯CSS 图片以:hover:after
作品但不理想
问题：
- 图像比率 （图像将为800px / 600px） 未得到维护 - 宽度被裁剪而非图像按比例缩小
- 图片位于主容器.outercontainer
- :hover 上的图片淡入 ，但:hover状态后不淡出是终止我尝试使用单独的动画/同一动画向后没有运气

期望效果：

所有东西都装在容器内，并标有蓝色边框 .outercontainer
编辑： 图片应该有自己的空间 - 大约80％的容器宽度和选项/菜单将是另外20％ - 没有重叠（如果图像与选项重叠，平板电脑用户将陷入：悬停状态）
.outercontainer并且内部的每个人都会根据屏幕进行调整宽度
支持的最小所需设备宽度为600px（忽略小于600px的屏幕）
步骤：
- 图片淡入:hover
- 只要elemet仍在:hover
- 图片淡出后，元素是＆＃34;未悬停＆＃34;

类似的帖子/问题

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 after-element

我的问题

如何使用以下内容显示图像：hover：在其父容器内？ （我希望它不超过该容器宽度的80％-85％ - 其余空间应分配给选项/菜单/列表项目）
如何使用以下内容显示图像：悬停：响应后？
如何在不干净之后让元素淡出？

我的CSS和HTML位于下方的片段中（不完全重新打开 - 请全屏打开）

＆＃13;

/* 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 */

＆＃13;

<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>

＆＃13;

修改 这是整个设置理想状态的图像。

谢谢。

Answer 1

只需将outercontainer设置在您想要的任何位置即可。将outercontainer position样式更改为relative和after后，将伪元素样式更改为position: absolute; left: 0; top: 0; width: 100%; height: 100%;似乎正常工作。使用CSS动画可以应用淡入淡出效果。

============最新变化==============

为outercontainer添加了与位置和边距相关的样式，以便将其显示到中心，添加了background和no-repeat等样式的伪元素background-size: cover样式。将div标记更改为ul并将flex样式更改为ul。

/* 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: absolute; /*border to highlight only - not part of final product*/
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    min-width: 50%;
    min-height: 50%;
    width: 80%;
    height: 80%;
	transform: translate(-50%, -50%);
}

.optioncontainer {
	width: 250px;
	max-width: 20vw;
    height: 100%;
}

.optionlist {
	padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.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: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-50%, -50%);
	animation: mycoolfade 1s;
    z-index:-1;
}

/* Start Background Control */

#red:after {
    background: url(http://lorempixel.com/800/600/)  no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#blue:after {
    background: url(http://lorempixel.com/800/601/)  no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#green:after {
    background: url(http://lorempixel.com/801/600/)  no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#yellow:after {
    background: url(http://lorempixel.com/801/601/)  no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#orange:after {
    background: url(http://lorempixel.com/799/600/)  no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#white:after {
    background: url(http://lorempixel.com/800/599/)  no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#black:after {
    background: url(http://lorempixel.com/801/599/)  no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/* End Background Control */

<body>
	The initial hiccup when the images load is not an issue 
	<div class="outercontainer">
		<div class="optioncontainer">
			<ul 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>
			</ul>
		</div>
	</div>
</body>

Answer 2

你问题的淡入/淡出部分：

/* Start Miscellaneous stuff */

body {
	background: #131418;
	color: #999;
	text-align: center;
}

.optionlist a {
	color: #999;
	text-decoration: none;
}

/* 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:after {
    content: '';
	width: 800px;
	height: 600px;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
    transition: opacity 1s;
    opacity: 0;
    pointer-events: none;
}

.optionlist li:hover:after {
	opacity: 1;
    pointer-events: auto;
}

/* 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>

Answer 3

这是我的尝试

可能我错过了一些东西，请告诉我是否是这种情况

诀窍是使optionlist元素widthbe始终为容器宽度的20％。

这样，我们可以将伪元素设为其父元素的400％，这相当于容器剩余的80％减去选项列表。

要处理淡出，我们需要让伪一直存在（不仅仅是在悬停时）。因此，我们将它们声明为基础状态，不透明度为0，并在悬停时将其更改为不透明度。

这会导致您检测到的错误，因为即使不透明度为0，悬停在伪触发器上，然后气泡到元素。这可以通过指针事件来解决：无伪。

body, html {
  height: 100%;  
}

body {
  background: #131418;
  color: #999;
  text-align: center;
}
.optionlist a {
  color: #999;
  text-decoration: none;
}
/* End Miscellaneous stuff */

.outercontainer {
  border: 1px solid blue;
  /*This needs to be in the middle of the screen t*/
  position: relative;
  /*border to highlight only - not part of final product*/
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1200px;
  max-width: 80%;
}
.optioncontainer {
  width: 20%;
}
.optionlist {
  position: relative;
  width: 100%;
}
.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:after {
  content: '';
  width: 400%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 100%;
   /*background-size: cover;   */
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1s;
  pointer-events: none;   /* do not trigger a hover */
}
.optionlist li:hover:after {
  opacity: 1;
}
/* Start Background Control */

#red:after {
  background-image: url(http://lorempixel.com/800/600/)
}
#blue:after {
  background-image: url(http://lorempixel.com/800/601/)
}
#green:after {
  background-image: url(http://lorempixel.com/801/600/)
}
#yellow:after {
  background-image: url(http://lorempixel.com/801/601/)
}
#orange:after {
  background-image: url(http://lorempixel.com/799/600/)
}
#white:after {
  background-image: url(http://lorempixel.com/800/599/)
}
#black:after {
  background-image: url(http://lorempixel.com/801/599/)
}

<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>

Answer 4

好问题。通过使用vh和vw单位为您的.outercontainer并稍微更改样式，我能够实现这一点。即将样式从:hover::after移动到::after。

.optionlist li:hover::after {
  /* Just toggling visibility and setting animation here */
  animation: mycoolfadein 1s;
  display: block;
}


/* Start Background Control -changed style names for testing */

.listitem::after {
  content: "";
  width: 80vw;
  height: 70vh;
  background-image: url(http://lorempixel.com/800/600/);
  background-size: 80vw 70vh;
  position: fixed;
  top: 50%;
  left: 50%;
  display: none;
  transform: translate(-50%, -50%);
}

至于要求。

如何使用以下内容显示图像：hover：在其父容器内？ -by知道父容器宽度并在content伪元素上设置相同，在这种情况下使用vh和vw并使用相同的图像尺寸
如何使用以下方式显示图像：hover：响应后？ - 与之前相同，但您也可以查看背景大小以将图像拉伸到位。
如何让元素在不干净之后淡出？ - 不幸的是，我认为我们必须使用JS来实现这一目标。

附上小提琴以供参考。fiddle here

注意：为了演示目的，很少有li元素不可移动

其他参考链接，CSS-Tricks article，SO question on pseudo element visibility

Answer 5

＆＃13;

body {
background: #ccd;
color: #fff;

}

.damn {
width:80%;
height:80%;
border: 1px solid black;
position:absolute;
top:50%;
left: 50%;
transform: translate(-50%, -50%);
display:flex;
align-items:center;
justify-content:center;
}
.controller{
padding:0;
margin:0;
list-style:none;
width:100%;
height:100%;
display:flex;
flex-direction:column;
flex-Wrap:wrap;
align-items:center;
justify-content:center;
}
.controller li {
background: #ddd;
list-style-type: none;
width:20%;
}
.controller li:nth-child(odd) {
	background: #000;
}
.controller li:hover {
	background: red;
}
.controller li:last-child{
background:#ccc;
width:80%;
height:100%;
padding:1%;}


/* content Control */
.imgWrap{
  border:1px solid blue;
  display:flex;
  overflow:hidden;
  align-items:center;
  justify-content:center;
}
#red:hover~.imgWrap{
content:url("http://www.markgray.com.au/images/gallery/large/desert-light.jpg");
}

#blue:hover~.imgWrap {
 content:url("https://www.hlf.org.uk/sites/default/files/styles/siftgroups_media_fullsize/public/media/programmes/landscape_partnerships_overlooking_the_wye_.jpg?itok=HOgiVAEW&width=800&height=600")}

#green:hover~.imgWrap { content:url("http://www.markgray.com.au/images/gallery/large/desert-light.jpg");
}
#yellow:hover~.imgWrap {
content:url("https://www.hlf.org.uk/sites/default/files/styles/siftgroups_media_fullsize/public/media/programmes/landscape_partnerships_overlooking_the_wye_.jpg?itok=HOgiVAEW&width=800&height=600")}

#orange:hover~.imgWrap { content:url("http://www.markgray.com.au/images/gallery/large/desert-light.jpg");
}
#white:hover~.imgWrap {
content:url("https://www.hlf.org.uk/sites/default/files/styles/siftgroups_media_fullsize/public/media/programmes/landscape_partnerships_overlooking_the_wye_.jpg?itok=HOgiVAEW&width=800&height=600")}

#black:hover~.imgWrap { content:url("http://www.markgray.com.au/images/gallery/large/desert-light.jpg");
}

＆＃13;

<body>
	<div class="damn">
		<ul class="controller">
			<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>
            <li id="showImg" class="imgWrap">a</li>
		</ul>
       
	</div>
</body>

＆＃13;

它还没有过渡。它尚未响应。它只是一个简单的显示。或者你想让我把它放进去？

伪元素背景揭示：悬停

5 个答案: