Question

这里是Javascript的新手，每当发生鼠标悬停时，我一直在尝试在HTML页面中更改图像的大小（宽度/高度），但是如果在CSS页面中设置了样式，它似乎不起作用，这对于因为我需要使用position属性来设置图像位置。

这是代码。

HTML：

<a  href="#"  onMouseOver="big()" onMouseOut="small()">
<img src="img1.png" name="image1" id="mw">
</a>

CSS：

#mw
{
    position:absolute;
    left:15%;
    top:35%;
    width:146px;
    height:97px;
}

JS：

function big()
{
    document.getElementsByName("image1").style.width=183;
    document.getElementsByName("image1").style.height=121;
}
function small()
{
    document.getElementsByName("image1").style.width=146;
    document.getElementsByName("image1").style.height=97;
}

Answer 1

您只能通过CSS解决它。有一个:hover - 伪类，一旦你悬停一个特定的元素就会被激活。对于您的请求，无需使用JavaScript。

var delay = 0;
var offset = 150;
if ($('body').find("span").hasClass('help-block')) {
     $('html, body').animate({scrollTop: $($(".help-block")[0]).offset().top - offset }, delay);
}

以上CSS代码片段的作用是：＆＃34; 如果您将id为mw ＆＃34;

的元素悬停，则将宽度和高度分别更改为183px和121px。

下面是一个例子。点击＆＃34;运行代码段＆＃34;并尝试将红宝石图像悬停。

＆＃13;

#mw:hover {
    width: 183px;
    height: 121px;
}

＆＃13;

#mw {
  position: absolute;
  left: 15%;
  top: 35%;
  width: 146px;
  height: 97px;
}

#mw:hover {
  width: 183px;
  height: 121px;
}

＆＃13;

Answer 2

这样做：

a:hover {transform:scale(1.5,1.5);}  <here you can set the x and y scaling

使用JS，您可以：

document.getElement etc.addEventListener("your event", function(event){
event.target.style.transform = "scale(1.5,1.5)";
});

Answer 3

简单的javascript版本，不需要样式

＆＃13;

var element = document.getElementsByName("image1")[0];
element.setAttribute('width', 146);
element.setAttribute('height', 97);

function big() {
  element.setAttribute('width', 183);
  element.setAttribute('height', 121);
}

function small() {
  element.setAttribute('width', 146);
  element.setAttribute('height', 97);
}

＆＃13;

<a href="#"  onMouseOver="big()" onMouseOut="small()">
  <img src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" name="image1" id="mw">
</a>

＆＃13;

使用Javascript更改图像宽度/高度

3 个答案: