在鼠标悬停期间更改图像大小

Question

我目前正在尝试这样做，以便如果我将鼠标悬停在li 上，图像会改变其大小。如果我将鼠标悬停在img 上，我设法从一个网站中提取了一个代码，该代码如下所示：

<div class="profiles">
    <ul>
        <li class="portraitsLeft" id="one" align="left">
            <a href="../project/profile1.html">
                <img src="../project/images/portraits/img1.jpg" width="100" onmouseover="this.width=150;" onmouseout="this.width=100" align="middle" alt="Img1"/>
            </a> 
            Character 1
        </li>
    </ul>
</div>

我不明白this 指的是什么。我假设它指向img，但它似乎不起作用。当我将鼠标悬停在li 或a 而不是this 上时，我应该如何更改代码以便更改图像大小？提前致谢。

Answer 1

在这种情况下不需要 CSS（尽管它更简洁）。您可以使用name 属性来执行此操作。

<img src="https://upload.wikimedia.org/wikipedia/commons/6/6f/OrteliusWorldMap.jpeg" width="150" height="100" name="OrteliusWorldMap"
onmouseover="OrteliusWorldMap.width='300';OrteliusWorldMap.height='200';"
onmouseout="OrteliusWorldMap.width='150';OrteliusWorldMap.height='100';" />

JSFiddle Link。

编辑：

借助name 属性，您现在可以随心所欲地更改它。

<div class="profiles">
    <ul>
        <li class="portraitsLeft" id="one" align="left">
            <a href="google.com" onmouseover="OrteliusWorldMap.width=150;" onmouseout="OrteliusWorldMap.width=100">
                <img src="https://upload.wikimedia.org/wikipedia/commons/6/6f/OrteliusWorldMap.jpeg" width="100" name="OrteliusWorldMap">
            </a> 
            Character 1
        </li>
    </ul>
</div>

JSFiddle Link.

尝试在别处使用this 的问题是this 将尝试引用当前的HTML 元素。有关this 以及onMouseOver event works 的更多信息，请参阅以下内容。

Answer 2

为什么不使用CSS？

<img id="image" src="../project/images/portraits/img1.jpg" align="middle" alt="Img1"/>

#image{
    width:50px;
    height:50px;
}

#image:hover{
    width:100px;
    height:100px;
}

JSFiddle Demo

或者您可以将代码更改为：

<img id="image" src="https://www.google.com/images/srpr/logo11w.png" onMouseOver="this.style.width='200px'" onMouseOut="this.style.width='100px'" alt="Img1"/>

使用this.style.width='200px'

JSFiddle Demo

Answer 3

除了 CSS，你也可以走 jQuery 路线：

$("img").mouseover(function() {
    $("img").css({ width: '150px', height: '150px' });
});

如果您愿意，这还允许您在悬停时添加一些动画。

这需要您在 HTML 中包含 jQuery 包：

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

Answer 4

你可以这样尝试：

<img src="https://upload.wikimedia.org/wikipedia/commons/6/6f/OrteliusWorldMap.jpeg" alt="test" />

img {
    width: 100px;
}
img:hover {
    width: 300px;
}

Working DEMO