伪元素背景揭示:悬停

Question

伪元素背景揭示:悬停

19 html css

摘要

目标设备(设备宽度+ 600px - 请忽略 Mobile/xs屏幕)
纯CSS图像揭示:hover:after
工作但不理想
的问题:
- 不保持图像比(图像将为800px/600px) - 宽度被裁剪而不是缩小图像
- 图像位于主容器之外 .outercontainer
- 该图像淡入的:hover 作品,但它并没有淡出后:hover状态终止我使用一个单独的动画/动画一样,没有运气试图向后

期望的效果:

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

类似的帖子/问题

在div内向上缩放图像和/或向下以使用CSS适合图像的最大边(将图像作为元素而不是作为伪元素的背景)
不能让图像适合div(与上面的链接相同)
按比例缩放所有图像以适合容器(将图像作为元素的背景,而不是作为背景:伪元素之后)

在SO上还有更多这样的问题.我还没有找到一个解决图像作为背景的:after伪元素

我的问题

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

我的CSS,HTML并在下面的片段(不完全resposive - 请全屏打开)

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

编辑: 这是整个设置理想情况的图像.

谢谢.

Answer 1

val*_*als 2

这是我的尝试

可能我遗漏了一些东西，如果是这种情况请告诉我

技巧是使选项列表元素宽度始终为容器宽度的 20%。

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

为了处理淡出，我们需要使伪对象始终存在（而不仅仅是在悬停时）。因此，我们将它们声明为不透明度 0 的基本状态，并在悬停时将其更改为不透明度 1。

这会导致您检测到的错误，因为即使不透明度为 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/)
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，8 月前
查看次数：	597 次
最近记录：	8 年，8 月前