background-image悬停css问题

时间：2017-04-20 09:00:00

标签： html css transition mousehover

我试图在这两张图片上有一个简单的鼠标悬停效果，但它不起作用。有人能帮助我吗？

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

＆＃13;
＆＃13; 
<!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>
＆＃13; 
{{1}}
＆＃13;
＆＃13;
＆＃13;

5 个答案:

答案 0 :(得分：2)

在psuedo-elements中使用content:'';来显示元素

＆＃13;
＆＃13; 
* {
    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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

你几乎得到了它，你只是错过了:: after和:: before伪选择器上的content: ' '属性。

＆＃13;
＆＃13; 
* {
    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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

  

你不需要为此写一个大的CSS。一个简单的：悬停和背景转换可以解决问题。   这是更新的代码：

＆＃13;
＆＃13; 
* {
    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");
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

仅在css下方更改

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

答案 4 :(得分：0)

  

试试这个：

你错过了content:'';

＆＃13;
＆＃13; 
* {
    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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题