背景图像悬停 css 问题

Question

我正在尝试对这两张图片进行简单的鼠标悬停效果，但它不起作用。有人可以帮助我吗？

当鼠标悬停在图片上时，我需要淡入淡出过渡。非常感谢！

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

Answer 1

在伪元素中使用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>

Answer 2

您几乎明白了，您只是缺少 ::after 和 ::before 伪选择器上的 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 {
    content: ' ';
 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 {
    content: ' ';
 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>

Answer 3

You dont need to write a large css for this . A simple :hover and background transition can do the trick. Here is the updated code:

* {
    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;
    
    transition: background-image 0.5s;
    -webkit-transition: background-image 0.5s;
    -moz-transition: background-image 0.5s;
}

#left-content:hover {
 background-image: url("https://s-media-cache-ak0.pinimg.com/736x/7a/06/a0/7a06a0f4f472ce6a17f2192123604b48.jpg");
}

#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;
     transition: background-image 0.5s;
    -webkit-transition: background-image 0.5s;
    -moz-transition: background-image 0.5s;
}

#right-content:hover {
 background-image: url("https://s-media-cache-ak0.pinimg.com/736x/2a/14/cc/2a14cc863b23abec6eacb0cefab44451.jpg");
}

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

Answer 4

仅在css

以下更改

#left-content:hover {
    opacity:0.2;
}
#right-content:hover {
    opacity:0.2;
}

Answer 5

Try this:

你刚刚错过了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 {
    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 {
  content:"";
 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 {
  content:"";
 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;
}

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

背景图像悬停 css 问题

background-image hover css issue

html

css

transition

mousehover