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

Answer 5

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>

Answer 6

＆＃39;这＆＃39;是大多数编程语言使用的关键字，包括java和javascript。＆＃39;这＆＃39; keyword用于指向当前对象。＆＃39;这＆＃39;始终是对调用方法（函数）的对象的引用。

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

6 个答案: