Question

新手在这里请耐心等待:)。

我有一个图像（图像＃1），它与页面的最左侧对齐（所有正文填充和边距设置为0）并添加了一些翻转javascript，因此新的图像（图像＃2）出现在其中放在鼠标悬停上。图像＃2大于图像＃1。

目前，在鼠标悬停时出现图像＃2，但未在页面左侧对齐（默认页面边距似乎已重新引入，并且忽略了主体CSS规则）。

是否有将ID应用于Image＃2所以我可以控制它的CSS样式？或者任何其他方法来删除鼠标悬停时出现的边距？基本上我希望2个图像在最左边角重叠。

非常感谢。谢谢！

Answer 1

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>

$('img#id').mouseover(function(){
$(this).css("property","value");

});

它需要jQuery ..

/////////////////////////////////////////////// ///////////////////////////////////////

var elem = document.getElementById("id"); //your img id is passed in here
elem.onmouseover= function(){
this.style.yourPropertiesInCamelCase = "value";
}

/////////////////////////////////////////////// /////////////////////////////////////// P.S。：如果你不知道它是什么，你可以google camelCase ... 注意“纯”Javascript中的css属性。可能存在浏览器不一致......您的代码可能变得不是交叉浏览器......

Answer 2

你有没有考虑过......

<script type="text/javascript">
function changeImage() {
   document.getElementById("theImg").src = "other.gif";
}
</script>

<img src="/myImage.gif" id="theImg" onmouseover="changeImage()" />

Answer 3

您可以使用固定尺寸和0-paddings并在其中添加图像。它可能有用吗？不确定。

无论如何，要进行翻转，您需要更改初始图像的“src”属性。其余的应该保持不变。

Answer 4

最好在CSS中使用锚悬停状态来换出背景图像，而不是使用javascript来完成这么简单的事情。此外，您应该将图像设置为一个图像，以便您可以一次加载它们，只需在悬停时更改背景位置...

http://jsfiddle.net/k36am/

javascript翻转图像 - （如何）我可以为onmouseover图像设置CSS样式？

4 个答案: