我正在尝试对这两张图片进行简单的鼠标悬停效果，但它不起作用。有人可以帮助我吗？
当鼠标悬停在图片上时，我需要淡入淡出过渡。 非常感谢!
* {
padding: 0; margin: 0;
}
html, body { height: 100%; }
.body {
height: 100vh;
text-align: center;
}
.square {
width: 100vm; height: 100vm; /* For IE9 */
width: 100vmin;
height: 100vmin;
display: inline-block;
vertical-align: middle;
margin-top: calc((100vh - 100vmin) / 2);
background-color: #eee;
font-size: 0;
}
.square:before {
content: "";
height: 100%;
}
.square:before, .content {
display: inline-block;
vertical-align: middle;
}
#left-content {
background-image: url('https://s-media-cache-ak0.pinimg.com/736x/55/dc/d8/55dcd85ce80e3900ce794efca5fba5ec.jpg');
background-size: cover;
width:50vmin;
height: 100vmin;
float:left;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#right-content {
background-image: url('https://s-media-cache-ak0.pinimg.com/originals/fd/55/82/fd5582332c1fdedbf63afa8e19c961bf.jpg');
background-size: cover;
width:50vmin;
height: 100vmin;
float:right;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#left-content:after {
background-image: url('https://s-media-cache-ak0.pinimg.com/736x/7a/06/a0/7a06a0f4f472ce6a17f2192123604b48.jpg');
background-size: cover;
width:50vmin;
height: 100vmin;
float:left;
opacity:0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#right-content:after {
background-image: url('https://s-media-cache-ak0.pinimg.com/736x/2a/14/cc/2a14cc863b23abec6eacb0cefab44451.jpg');
background-size: cover;
width:50vmin;
height: 100vmin;
float:right;
opacity:0;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#left-content:hover:after {
opacity:1;
}
#right-content:hover:after {
opacity:1;
}<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style_intro.css">
</head>
<body>
<div class="body">
<div class="square">
<div class="content">
<a href="http://www.google.com"><div id="left-content"></div></a>
<a href="http://www.yahoo.com"><div id="right-content"></div></a>
</div>
</div>
</div>
</body>
</html>最佳答案
在伪元素中使用content:'';来显示元素
* {
padding: 0; margin: 0;
}
html, body { height: 100%; }
.body {
height: 100vh;
text-align: center;
}
.square {
width: 100vm; height: 100vm; /* For IE9 */
width: 100vmin;
height: 100vmin;
display: inline-block;
vertical-align: middle;
margin-top: calc((100vh - 100vmin) / 2);
background-color: #eee;
font-size: 0;
}
.square:before {
content: "";
height: 100%;
}
.square:before, .content {
display: inline-block;
vertical-align: middle;
}
#left-content {
background-image: url('https://s-media-cache-ak0.pinimg.com/736x/55/dc/d8/55dcd85ce80e3900ce794efca5fba5ec.jpg');
background-size: cover;
width:50vmin;
height: 100vmin;
float:left;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#right-content {
background-image: url('https://s-media-cache-ak0.pinimg.com/originals/fd/55/82/fd5582332c1fdedbf63afa8e19c961bf.jpg');
background-size: cover;
width:50vmin;
height: 100vmin;
float:right;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#left-content:after {
background-image: url('https://s-media-cache-ak0.pinimg.com/736x/7a/06/a0/7a06a0f4f472ce6a17f2192123604b48.jpg');
background-size: cover;
width:50vmin;
height: 100vmin;
float:left;
opacity:0;
content:'';
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#right-content:after {
background-image: url('https://s-media-cache-ak0.pinimg.com/736x/2a/14/cc/2a14cc863b23abec6eacb0cefab44451.jpg');
background-size: cover;
width:50vmin;
height: 100vmin;
float:right;
opacity:0;
content:'';
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
#left-content:hover:after {
opacity:1;
}
#right-content:hover:after {
opacity:1;
}<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style_intro.css">
</head>
<body>
<div class="body">
<div class="square">
<div class="content">
<a href="http://www.google.com"><div id="left-content"></div></a>
<a href="http://www.yahoo.com"><div id="right-content"></div></a>
</div>
</div>
</div>
</body>
</html>关于html - 背景图像悬停 CSS 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43514848/