我试图通过将鼠标悬停在它上来缩放,但似乎没有效果。将鼠标悬停在hover上时可以设置样式吗?
得到我在下面使用的代码以及一个jsfiddle: https://jsfiddle.net/695e7ca9/
HTML:
<div class="window">
<div class="col">
<a href="google.com" class="box">
<span class="title-label">window title </span>
<span class="content"></span>
</a>
</div>
</div>
CSS:
.col {
max-width: 50%;
}
.title-label {
display: block;
padding: 20px;
margin-bottom: 0;
color: #fff;
font-weight: 700;
background: #0176ff;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px;
border-radius: 4px 4px 0 0;
}
.content {
margin-top: -1px;
box-shadow: inset 0 0 0 1px #0176ff;
border-top: 0;
padding: 25px;
min-height: 235px;
display: block;
}
.window .col .box:hover {
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
-moz-box-shadow: 0 0 49px rgba(0, 0, 0, .06);
-webkit-box-shadow: 0 0 49px rgba(0, 0, 0, .06);
box-shadow: 0 0 49px rgba(0, 0, 0, .06);
}
答案 0 :(得分:4)
它不起作用,因为它是一个<a>
,一个内联元素。
您需要添加display:block
才能使其正常运行。
此外,我添加了transition: transform 250ms
为动画添加了一些“平滑度”。