Question

我希望我的图像在鼠标悬停时可以缩放。

我尝试调整this示例。请参阅img和img.hover

CSS：

h1 {
    text-align:center;
    animation: acid 1s infinite;
    -webkit-animation: acid 1s infinite;
}

div { 
    text-align:center;
}

hr {
    width:30%;
}

img {
    width:629px;
    height:321px;
    -webkit-transition: width 1s ease, height 1s ease;
}

img.hover {
    width:944px;
    height:481px;
}

@keyframes acid {
    0% {color:blue}
    50% {color:red}
    100% {color:blue}
}

@-webkit-keyframes acid {
    0% {color:blue}
    50% {color:red}
    100% {color:blue}
}

应该缩放的图像由<img src="http://www.jose-aguilar.com/blog/wp-content/uploads/2012/09/html-colors.png" alt="Colors">

定义

HTML：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0_0</title>
        <link rel="stylesheet" type="text/css" href="my_styles.css">
    </head>
    <body>
        <h1>I am page header</h1>
        <div>Below there are <a href="http://en.wikipedia.org/wiki/Color">colors </a>:</div>
        <div>
            <img src="http://www.jose-aguilar.com/blog/wp-content/uploads/2012/09/html-colors.png" alt="Colors">
        <div>
        <!--You are looking at the source of this page-->
        <hr>
        <button type="button">I am button</button>
        <div>I don't do anything</div>
        <hr>
        <br>
        <div>
            <input type="checkbox" style>option 1<br>
            <input type="checkbox">option 2 
        </div>
    </body>
</html>

将像素值更改为img和img.hover中的百分比值无济于事。在Firefox和Chrome中测试

Answer 1

你应该使用Pseudo-classes

img:hover

有关详细信息，请参阅此处 Pseudo-classes on MDN。比w3schools好多了。

Answer 2

标记中有一个简单的错误... img.hover应为img:hover。

请参阅pseudo-class specification from W3C。

Answer 3

它不是

img.hover
{
    width:944px;
    height:481px;
}

其:hover

img:hover
{
    width:944px;
    height:481px;
}

FIXED DEMO

如何使用转换CSS缩放图像？

3 个答案: