在鼠标悬停期间更改图像大小 [英] Changing image size during mouse hover

问题描述

我目前正试图让它悬停在 li 上，图片改变了它的大小。如果我将鼠标悬停在 img 上，如下所示：

$ b我设法从网站中提取代码$ b

 < div class =profiles> 
< ul> 
< li class =portraitsLeftid =onealign =left> 
< a href =../ project / profile1.html> 
 < / a> 
字符1 
< / li> 
< / ul> 
< / div> 
  

我不明白的是这个正指向。我假设它指向 img ，但它似乎不起作用。我应该如何更改代码，以便在将鼠标悬停在 li 或 a 上时更改图像大小，而不是此？在这种情况下，不需要CSS（虽然它更干净）。您可以使用名称属性来完成此操作。

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

JSFiddle链接。

编辑：

您可以随时随地更改它，感谢名称属性。

 < div class =profiles> 
< ul> 
< li class =portraitsLeftid =onealign =left> 
< a href =google.comonmouseover =OrteliusWorldMap.width = 150;的onmouseout = OrteliusWorldMap.width = 100 > 
< img src =https://upload.wikimedia.org/wikipedia/commons/6/6f/OrteliusWorldMap.jpegwidth =100name =OrteliusWorldMap> 
< / a> 
字符1 
< / li> 
< / ul> 
< / div> 
  

JSFiddle Link。

试图在其他地方使用 this 的问题是这个会尝试引用当前的HTML元素。有关 此 的更多信息，请参阅以下内容： a>以及 onMouseOver事件如何运作。

I am currently trying to make it so that if i hover over the li, the image changes its size. I managed to pull out a code from a website that changes the image size if i hover over the img which looks like the following:

<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>

What i don't understand is what this is pointing at. I assumed it points at img but it doesn't seem to work. How should I change the code so that i can change the image size when i hover over the li or a instead of this? Thanks in advance.

解决方案

There's no need for CSS(although it is cleaner) in this case. You can do this using a name attribute.

<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.

EDIT:

You can now change it anywhere you like thanks to the name attribute.

<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.

The issue with trying to use this elsewhere is that this will try to reference the current HTML element. See the following for more information on this and how the onMouseOver event works.

这篇关于在鼠标悬停期间更改图像大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！