当鼠标悬停时,我希望我的主标志更换。
我知道有几种实现方法,并想知道最稳定、兼容性最好、效率最高且设置最简单的方法是什么。
我找到的一些方法包括:
- 使用Javascript(jQuery)替换“src”属性。
- 使用背景和“hover”的CSS
还有其他方法吗?哪个最好?
当鼠标悬停时,我希望我的主标志更换。
我知道有几种实现方法,并想知道最稳定、兼容性最好、效率最高且设置最简单的方法是什么。
我找到的一些方法包括:
还有其他方法吗?哪个最好?
对于包含内容的图片,您应该在HTML标记中使用src
。对于需要滚动效果的图片,您可以使用JavaScript并将滚动图片放在属性中。
对于不包含内容的UI元素,特别是在整个网站或多处出现的元素上,直接使用CSS解决方案是最好的选择(这样您就不必在每次调用时重新声明图像位置)。在CSS解决方案中,精灵图(sprites)是最佳选择,因为它们不需要预加载开销。
HTML:
<img src="/img/one.jpg" data-rollover="/img/two.jpg" />
在jQuery中:
$(function(){
$('img.rollover').hover(function(){
var e = $(this);
e.data('originalSrc', e.attr('src'));
e.attr('src', e.attr('data-rollover'));
}, function(){
var e = $(this);
e.attr('src', e.data('originalSrc'));
}); /* a preloader could easily go here too */
});
示例实现:http://jsfiddle.net/dtPRM/1/
优点:易于实现;逻辑清晰;一旦设置好库,就可以最小化额外标记来处理。
缺点:需要JavaScript,并要加载jQuery库的开销。
可能是最佳选择。如果用户使用与悬停相关的浏览器(很可能是这种情况),他们具有运行此选项所需的JavaScript功能。那些出于某种原因故意关闭JavaScript的人会收到一个 <noscript>
的提示说明他们可能无法获得完整的功能集。
HTML:
<div id="img1" />
CSS:
div#img1 {
height: 400px;
width: 300px;
background: url('http://dummyimage.com/600x400/000/fff') no-repeat top left;}
div#img1:hover {
background-position: top right;}
示例实现:http://jsfiddle.net/dtPRM/5/
个人认为,对于包含内容的图片而言,这比使用CSS和两张背景图片的解决方案更糟糕。你将HTML标记从显示的语义值中分离出来。
但是,如果您使用没有内容的图像(如UI元素),则我认为这是最佳解决方案。
另外还有一种CSS选项可用,它不涉及背景图像(如果您想在HTML中使用图像标记,例如对于语义上有意义的图像,则会优先考虑这种解决方案)。
<div class="rollover">
<img class="rollover" src="http://dummyimage.com/600x400/000/fff" />
<img class="" src="http://dummyimage.com/600x400/fff/000" />
</div>
CSS(我在这里使用:not
伪选择器,但避免使用它也很容易;我还认为我语义上颠倒了类名):
div.rollover img:not(.rollover) {display: none;}
div.rollover:hover img:not(.rollover) {display: inline;}
div.rollover:hover img.rollover {display: none;}
示例实现:http://jsfiddle.net/dtPRM/2/
优点:与以前在样式表中放置所有信息的CSS解决方案相比,从语义上讲更加明智。
缺点:需要多余的标记。
评论:这个可能会根据浏览器是否调用而自动预加载。
底线:如果选项(1)不可用,因为您绝对需要IE2兼容性或非JS支持,则是一个不错的备选方案。
我之所以提及这一点,是因为你在问题中提到了它。 我不会使用它。
HTML:
<div id="img1" />
CSS:
div#img1 {
height: 400px;
width: 600px;
background: url('http://dummyimage.com/600x400/000/fff') no-repeat top left;}
div#img1:hover {
background-image: url('http://dummyimage.com/600x400/fff/000');}
示例实现: http://jsfiddle.net/dtPRM/4/
优点: 兼容性广泛; 您只需要支持背景图像和悬停功能。
缺点: 在CSS中放置图像和对其进行集中管理在语义上可能会有些奇怪,且会使未来的修改更加困难。尽管如此,如果您需要创建一个需要交互效果的图像,那么很可能这是一个非内容图像(例如UI元素),在这种情况下,使用CSS也许比普通图像在语义上更合适。请参见下面关于精灵图的注释。
其他缺点: 您必须小心声明图像的高度和宽度(这是一个很好的做法,但当您只想快速完成任务时可能会变得繁琐)。在移动浏览器上查看时,可能会处理CSS背景图像的方式与预期不同。
更多缺点: 如果您想在其上层添加预加载器,则需要使用JavaScript并选择可交互的元素,这样做的速度可能与直接使用JavaScript相当。
底线: 不要将此用于内容图像。如果必须避免使用JavaScript,请对UI元素使用精灵图,并对语义上有意义的图像使用其他解决方案。
.data()
访问 HTML5 data-
属性。http://api.jquery.com/data - alexia#btn{
width:100px; height:100px;/*the dimensions of your image*/
background:url(bird.png) left top no-repeat;
}
#btn:hover{
background-position:left bottom;/* pixel references can be used if prefered */
}
使用这样的图片:
注意:避免使用JS替换图片,因为如果图片没有被缓存,将会导致短暂的图片加载时间。
希望这能帮到你!
W.
#btn
应该是什么类型的元素?一个空白 div
吗? - AP257使用CSS背景和“hover”
使用CSS精灵,即将两个图像合并为一个,然后使用CSS的:hover
来切换图像。
使用CSS的一个优点是即使JavaScript关闭也可以工作。
使用单个图像的一个优点是避免了额外的HTTP请求。
参见:http://css-tricks.com/css-sprites/
帮助生成图像和CSS的工具:
:hover
CSS 规则。使用CSS精灵和:hover伪类。以下是原因:
通过JS或CSS切换图像源会在第一次鼠标悬停时导致“闪烁”,因为新图像被浏览器下载。如果使用精灵,就只有一个图像改变位置,所以不会出现闪烁。
单个图像减少了HTTP请求,使网站整体加载更快。
如果用户禁用JavaScript,它仍然可以工作。
所有浏览器类型都支持它(至少桌面浏览器支持,没有:hover状态的手机浏览器不计算在内)。
$('#div1').hover(function(){
this.style.color='white';
},function(){
this.style.color='black;
});
或者
$('#div1').onmouseover()...
$('#div1').onmouseout()...