Html 在鼠标悬停期间更改图像大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24983648/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing image size during mouse hover
提问by user3748353
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 imgwhich looks like the following:
我目前正在尝试这样做，如果我将鼠标悬停在 上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>
What i don't understand is what thisis pointing at. I assumed it points at imgbut 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 lior ainstead of this? Thanks in advance.
我不明白的this是指的是什么。我假设它指向img但它似乎不起作用。我应该如何更改代码，以便在将鼠标悬停在li或a而不是时更改图像大小this？提前致谢。
回答by G--
There's no need for CSS(although it is cleaner) in this case. You can do this using a nameattribute.
在这种情况下不需要 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';" />
EDIT:
编辑：
You can now change it anywhere you like thanks to the nameattribute.
由于该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>
The issue with trying to use thiselsewhere is that thiswill try to reference the current HTML element. See the following for more information on thisand how the onMouseOver event works.
尝试在this别处使用的问题是this会尝试引用当前的 HTML 元素。有关onMouseOver 事件this及其工作原理的更多信息，请参阅以下内容。
回答by imbondbaby
Why not use CSS?
为什么不使用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;
}
Or you can change your code to this:
或者您可以将代码更改为：
<img id="image" src="https://www.google.com/images/srpr/logo11w.png" onMouseOver="this.style.width='200px'" onMouseOut="this.style.width='100px'" alt="Img1"/>
Use this.style.width='200px'
用 this.style.width='200px'
回答by imbondbaby
Alternatively to CSS, you could go the jQuery route:
替代 CSS，您可以使用 jQuery 路线：
$("img").mouseover(function() {
$("img").css({ width: '150px', height: '150px' });
});
This would also allow you to add some animations on hover if you wanted that.
如果需要，这还允许您在悬停时添加一些动画。
This would require that you include the jQuery package in your HTML:
这将要求您在 HTML 中包含 jQuery 包：
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
回答by Rahul Tripathi
You may try like this:
你可以这样尝试：
<img src="https://upload.wikimedia.org/wikipedia/commons/6/6f/OrteliusWorldMap.jpeg" alt="test" />
img {
width: 100px;
}
img:hover {
width: 300px;
}
回答by Nish
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>
回答by Ajit Singh
'this' is a keyword used by most proramming languages including java and javascript. 'this' keyword is used to point the current object. 'this' is always a reference to the object on which the method(function) was called.
'this' 是大多数编程语言（包括 java 和 javascript）使用的关键字。'this' 关键字用于指向当前对象。'this' 始终是对调用方法（函数）的对象的引用。
