我对此很陌生。 我正在写html,我很好奇,如果有可能在链接悬停时切换到另一个图像。当鼠标悬停在链接选项上时切换图片
1
A
回答
1
是的,你可以,here是一个使用javascript的例子。
1
绝对如此。如果你的代码看起来是这样的:
<div class="menu">
<a href="1.html">First</a>
<a href="2.html">Second</a>
<a href="3.html">Third</a>
</div>
一些款式简单地添加到你的头:
<style type="text/css">
/* These are comments, and are ignored by the browser
. {dot} is the CSS selector for a class
We are selecting all of the "a" elements inside of
the element with a class of "menu"
*/
.menu a {
background-image: url('link.gif');
width: 100px;
}
/* :hover, :active, and :focus are all pseudo-selectors -- they select
elements based on their state rather than based on their attributes
*/
.menu a:hover, .menu a:active, menu a:focus {
background-image: url('link_hover.gif');
}
</style>
一个最好的地方开始学习HTML和CSS是W3Schools。通过他们的例子阅读会给你一个基本知识的坚定把握,然后浏览HTML和CSS这里的问题会让你更深入地了解事情的工作方式。祝你好运!
1
正如Sean Vieira所说,常见的方法是根据菜单标记的状态对HTML标记进行CSS修改。
这可能是因为这是基本的:
<style> div.myimg:hover { background-image:url(p1.png); } div.myimg { background-image:url(p2.png); } </style> <div class="myimg"> <a href="#">my link here</a> </div> </code>
也有可能,并使用从jQuery库hover功能没有多大的难度。
0
我会强烈建议使用CSS精灵:
http://www.alistapart.com/articles/sprites
概念可能会有点难以在第一把握,但你基本上结合原始图像和悬停状态(即当链接悬停时,您将交换的图像)合并为一个图像,然后一次只显示该图像的适当部分,作为定位的锚点元素上的背景图像。
有这种方法的几个显著的好处:
- 通过两个图像合并成一个,你消除一个HTTP请求,从而提高页面加载性能的需求。
- 当使用典型的JavaScript交换效果时,直到用户将鼠标悬停在链接上,才会加载“悬停”图像。这会在加载/渲染时产生明显的视觉震动滞后。使用CSS精灵,两种图像状态一次加载(它们是同一图像的一部分),因此悬停效果是即时的。
- 一些(包括我自己)会争辩说简单的悬停图像交换属于表示层(CSS),而不是行为层(JavaScript)。这只是一个很好的做法,可以提供更易于维护和易于理解的代码。
当然,这是假定您切换的图片是链接图片本身,而不是页面上的鼠标悬停在链接上时不同的元素。这当然是可能的,但需要JavaScript。
相关问题
- 1. 当鼠标悬停在DropDownList项目上时显示图片ASP.NET
- 2. 当鼠标悬停在超链接上时显示图片缩略图(jQuery,CSS?)
- 3. 当鼠标悬停在链接上时显示图像
- 4. 图片上鼠标悬停
- 5. 显示文本当鼠标悬停在图片链接
- 6. 在鼠标悬停上切换文本
- 7. 将鼠标悬停在链接上,图片显示循环
- 8. 将鼠标悬停在图片上作为链接问题
- 9. 将鼠标悬停在图片上的主动输入选项
- 10. 当鼠标悬停在链接上时,改变div的颜色
- 11. 当鼠标悬停在链接上时禁用手形符号
- 12. 将鼠标悬停在菜单项上时移动超链接。
- 13. 变色链接,当鼠标悬停格
- 14. 将鼠标悬停在图片上
- 15. 将鼠标悬停在图片上
- 16. 图片缓解链接上的鼠标悬停
- 17. 当我将鼠标悬停在父项上时,如何切换孩子?
- 18. 当鼠标悬停在选项上时改变颜色
- 19. 当鼠标悬停在链接上时出现菜单子链接
- 20. 将鼠标悬停在链接上,切换div的可见性直到鼠标离开BOTH链接和div
- 21. 当将鼠标悬停在链接上时,使图像显示在背景中
- 22. 鼠标悬停上出现的链接?
- 23. 当鼠标悬停在图片上时,如何在tumblr上显示标签?
- 24. jQuery:在鼠标悬停/悬停上创建链接
- 25. 当鼠标悬停在任何“a”链接上时,jQuery图像悬停/浮动在光标旁边?
- 26. 鼠标悬停时的显示链接
- 27. 鼠标悬停在切换滑轨
- 28. 当鼠标悬停在链接上时,更改div的背景图像
- 29. 在链接鼠标悬停上显示播放图标
- 30. 在容器元素的鼠标悬停上切换图像