我一直在搞乱一些 html5/css3 转换，在我的一生中，我无法在将鼠标悬停在文本上时放大背景图像，我做错了什么是这种方式吗？还是我完全偏离了路线
下面的代码......
<!doctype html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.img-holder {
width: 400px;
height: 298px;
overflow: hidden;
margin: 10px;
position: relative;
color:white;
transition: all 0.5s ease-in-out;
font-size:20px;
font-weight:bold;
}
.img-holder img {
transform: scale(1);
transition: all 0.5s ease-in-out;
}
.img-holder img:hover {
transform: scale(1.1);
transition: all 0.5s ease-in-out;
}
.texthover {
position: absolute;
padding: 20px;
bottom: 0;
left: 0;
display:-moz-box;
}
.img-holder:hover {
color:red;
transition: all 0.5s ease-in-out;
}
</style>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div class="img-holder"><a href="#"><img src="http://image.shutterstock.com/display_pic_with_logo/516040/96143585/stock-photo-dj-mixes-the-track-in-nightclub-at-party-96143585.jpg"/></a>
<div class="texthover">Here's some text!!</div>
</div>
</body>
</html>
非常感谢
最佳答案
您将重新排列 HTML 中的元素，并在将鼠标悬停在文本上时使用相邻的兄弟组合器选择后续的 img 元素 (.texthover:hover + img) .
.img-holder img:hover, .texthover:hover + img {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
}
如果您只希望在将鼠标悬停在文本上时发生转换，您只需使用:
.texthover:hover + img {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
}
关于html - 背景图像缩放 html5 css3，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21446016/