堆栈内存溢出
  简体   繁体   English

背景图片悬停CSS问题

[英]background-image hover css issue

 原文  2017-04-20 09:00:00  4   5    html/ css/ transition/ mousehover

问题描述

I am trying to have a simple mouse hover effect on those two pictures but it doesn't work. 我正在尝试对这两张图片进行简单的鼠标悬停效果，但是它不起作用。 Could someone help me? 有人可以帮我吗？

I would need a fade transition when the mouse is over the pictures. 当鼠标悬停在图片上时，我需要淡入淡出过渡。 Thank you very much! 非常感谢你！ 

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

5 个解决方案

解决方案1
 2 已采纳  2017-04-20 09:04:20

Use content:''; 使用content:''; in psuedo-elements to display the element 在伪元素中显示元素 

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

解决方案2
 1  2017-04-20 09:04:42

You almost got it, you're just missing the content: ' ' attribute on the ::after and ::before pseudo selector. 几乎可以理解，只是缺少:: selector和:: 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>

解决方案3
 0  2017-04-20 09:07:11

You dont need to write a large css for this . 您无需为此编写大型CSS。 A simple :hover and background transition can do the trick. 一个简单的：hover和背景转换就可以解决问题。 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>

解决方案4
 0  2017-04-20 09:09:27

change only below css 仅在css以下更改 

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

解决方案5
 0  2017-04-20 09:11:08

Try this: 尝试这个：

You just missed content:''; 您只是错过了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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 CSS背景图片问题 - Css background-image issue CSS背景图片对齐问题 - CSS background-image alignment issue 的CSS背景图片问题 <select>和<option> - CSS background-image issue for <select> & <option> 使用CSS，我可以在悬停时增加背景图像的对比度吗？ - With CSS, can I increase the contrast of background-image upon hover? 悬停rotateY时的CSS背景图像覆盖div - CSS background-image cover div when rotateY on hover 使用类中的纯css调整背景图像的大小：悬停 - Resizing a background-image using pure css inside a class:hover 悬停在锚标记上的CSS背景图像重复 - CSS background-image repeat on hover over anchor tag 在悬停时更改 css 背景图像 svg 绘制行为？ - change css background-image svg paint behavior on hover? 背景图像悬停状态 - background-image hover state 悬停时的背景图像变化 - background-image change on hover
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM