Question

我一直在搞乱一些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>

非常感谢

Answer 1

当您将鼠标悬停在文本（img）上时，您可以对HTML中的元素进行重新排序并使用相邻的兄弟组合子来选择后续的.texthover:hover + img元素。

EXAMPLE HERE

.img-holder img:hover, .texthover:hover + img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
}

如果仅希望在将鼠标悬停在文本上时进行转换，则只需使用：

EXAMPLE HERE

.texthover:hover + img {
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
}

背景图像比例html5 css3

1 个答案: