胡佛在图像上 [英] Hoovering on an image

问题描述

我正在尝试在图像上移动时更改图像。我试图用jsFiddle测试结果，但它不起作用。



http： //jsfiddle.net/8XKLj/ [ ^ ]



任何想法为什么？

I am trying to change an image when hoovering on the image. I am trying to test the outcome with jsFiddle but it is not working.

http://jsfiddle.net/8XKLj/[^]

Any ideas why?

推荐答案

这是因为你甚至没有尝试实现它。你添加了3个独立的机制并且没有使用它们中的任何一个：

This is because you did not even try to implement it. You added 3 independent mechanisms and did not use any of them:

1. 你包含了jQuery但从未使用过这个库中的单个函数。
2. 你添加了真正使用为元素< div> 定义的样式的CSS，但从未向HTML添加任何此元素。即使你为< img> 元素应用了这种机制，它也行不通，因为你有太多的图像，一个在后台（改变）而另一个在前景......使背景隐藏在后面，所以整个事情都行不通。
3. 你向HTML添加了元素< img> ，但从未实现过事件正确;请注意，如果你使用的是jQuery而不用几行代码触及HTML就可以做到这一点。

1. You included jQuery but never ever used a single function from this library.
2. You added really working CSS with the style defined for the element <div>, but never ever added any of the this element to you HTML. Even if you applied this mechanism for <img> element, it would not work, because you would have too image, one in the background (changing) and another in foreground… making background hidden behind, so whole thing would not work.
3. You added events to the element <img> to your HTML but never implemented the events properly; note that doing it is pointless if you are using jQuery which does it all without touching HTML in few lines of code.

作为CSS方法绰绰有余，我将展示这个解决方案。由于您可能不希望将此样式应用于所有 div，因此我只将一个类添加到此元素的一个实例中，称为box：



CSS：

As the CSS approach is more than enough, I'll show just this solution. As you probably would not want to apply this style to all divs, I added a class to just one instance of this element, called it "box":

CSS:

div.box {
    width: 100px; height: 100px;
    background: url('http://dummyimage.com/100x100/000/fff');
}
div.box:hover {
    width: 100px; height: 100px;
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

HTML：

HTML:

<div class="box" />

另一种方法是使用jQuery：http://api.jquery.com/hover [ ^ ]。



您需要使用一种方法，而不是一次只能使用两种或三种方法，因为它们可以相互干扰。

-SA

检查 http：// jsfiddle。 net / damithsw / 8XKLj / 6 / [ ^ ]

在框架和扩展名下选择没有换行< head>< / head> 或没有换行< body>< / body> ; 选项

这篇关于胡佛在图像上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！