文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
社区首页 >问答首页 >伪元素背景显示打开:悬停

问伪元素背景显示打开:悬停
EN

Stack Overflow用户
提问于 2016-12-20 14:41:20
回答 5查看 974关注 0票数 19

摘要

  • Target devices (Device Width +600px - are ignore Mobile / xs screens)
  • Pure

down

  • Issues：
    • 图像比例(图像将为800px/600px)不会保持-宽度被裁剪，而不是图像被缩小
    • 图像在主容器code之外fade-in :hover works on :hoverworkson it fade-out after :hover state is terminated我试着反向使用单独的动画/相同的动画，但没有成功

​

期望效果

带有标记为.outercontainer

  • Edit:的蓝色边框的
  • 所有内容都适合容器内图像应该有自己的空间-约为容器宽度的80%，选项/菜单将是其他20% -无重叠(如果图像重叠在选项上，平板电脑用户将陷入困境:hover state)
  • .outercontainer
  • Everything inside根据屏幕调整所需的设备宽度要支持的宽度为600px (忽略小于600px)
  • Steps:

的屏幕

代码语言：javascript
复制
- Images Fade in on `:hover`
- Images remain visiable so long as the elemet is still in `:hover`
- Images fade-out after the element is "un-hovered"

​

类似的帖子/问题

之后的背景的图像

在上还有更多类似的问题。我还没有找到一个伪元素后的背景图像的地址

My Questions

  1. 如何将显示为:hover:after的图像放入其父容器中？(我希望它占用的空间不超过该容器宽度的80%-85% -其余空间应分配给选项/菜单项/列表项)hover
  2. 如何使图像显示:hover:after responsive?
  3. How

取消放置后，是否可以使元素淡出？

My CSS__and HTML__are in the snippet (不是完全回复-请全屏打开)

​

代码语言：javascript
复制
/* 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 */
代码语言：javascript
复制
<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>

​

编辑：这是理想情况下整个设置的图像。

​

谢谢。

html
css
EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2016-12-24 03:16:37

这是我的尝试

也许我漏掉了什么，如果是这样，请告诉我。

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

这样，我们可以使伪元素的父元素占400%，这相当于容器减去optionlist后剩余的80%。

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

这会导致您检测到的bug，因为即使不透明度为0，伪图上的悬停也会触发，然后会冒泡到元素。这可以通过指针-events: none on the伪来解决。

​

代码语言：javascript
复制
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/)
}
代码语言：javascript
复制
<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>

​

票数 2
EN

Stack Overflow用户

发布于 2016-12-20 14:53:11

只要在你想要的任何地方设置你的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和ul的flex样式。

​

代码语言：javascript
复制
/* 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 */
代码语言：javascript
复制
<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>

​

票数 3
EN

Stack Overflow用户

发布于 2016-12-23 19:53:35

你问题的fadein/fadeout部分：

​

代码语言：javascript
复制
/* 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 */
代码语言：javascript
复制
<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>

​

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/41236294

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档