鼠标悬停时更改图像大小

Question

鼠标悬停时更改图像大小

4

我目前正在尝试使得当我将鼠标悬停在 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时更改图像大小？提前致谢。

- user3748353

"this" 指的是当前事件所指的元素...在这种情况下，onmouseover 事件指的是正在被鼠标悬停的 "this" 图像。 - The One and Only ChemistryBlob

如果您喜欢缩放效果--http://jsfiddle.net/y4yAP/--https://dev59.com/4mIj5IYBdhLWcg3wmmNE - Tasos

你确定上面的代码不起作用吗？看一下这个 JSFiddle。它验证了你的代码并且可以正常工作。 - G--

6个回答

4

为什么不使用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演示

或者您可以将您的代码更改为以下内容：

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

- imbondbaby

2

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

- user3871006

2

您可以尝试这样做：

您可以尝试以下操作：

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

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

演示链接

（此链接为可工作的演示）

- user3414693

首先，感谢您的帮助。然而，我认为这个答案并不是我需要帮助的（如果问题不够具体，对此感到抱歉）。从您的代码中，我认为它只在我悬停在img上时更改图像大小，如果我没有弄错的话。我想知道如何更改内部li中的特定图像，以便在我悬停在<a>或<li>的任何部分时更改其大小。我编辑了问题，使其更加具体。谢谢。 - user3748353

2

You can try using Javascript, without using any "this" keyword.

<html>
 <body>
    <ul>
       <li>
          <a href="" onmouseover="img_increase()" onmouseout="img_decrease()">Character</a>         
          <img id="image" src="../project/images/portraits/img1.jpg" width="100" >          
       </li>
    </ul>

   <script>

        function img_increase()
        {
            document.getElementById("image").style.width="150px";
        } 

        function img_decrease()
        {
           document.getElementById("image").style.width="100px";
        }

    </script>

 </body>

</html>

- Nish

1

"'this'是大多数编程语言（包括Java和JavaScript）中使用的关键字。'this'关键字用于指向当前对象。'this'始终是对调用方法（函数）的对象的引用。"

- Ajit Singh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- G-- · Accepted Answer

在这种情况下，没有必要使用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链接。

编辑：

现在，由于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链接。

尝试在其他地方使用this的问题在于，this将尝试引用当前HTML元素。欲了解更多关于this的信息，请参阅以下内容：this以及onMouseOver事件的工作原理。