jquery - 如何使用来自不同图像文件的一个图标?

标签 jquery html css

Here是一个图像文件中的一组图标。和 here是另一组。

我如何使用一个文件中的图标创建一个链接(a href),在悬停时它应该从另一个文件(相同位置)获取图标并在点击时从第三个文件获取图标?

这是只使用一个图标的 CSS:

width: 16px;  
height: 16px;  
background-image: 
url(images/ui-icons_222222_256x240.png); 
background-position: -32px -128px; 

最佳答案

您所要做的就是为链接的不同状态定义样式:

a:link,a:visited { /* for regular non-hovered, non-active link styles */
    width: 16px;  
    height: 16px;
    background-image:
    url(images/defaultStateImage.png); 
    background-position: -32px -128px;
}

a:hover { /* for hover/mouse-over styles */
    url(images/hoverStateImage.png); 
    background-position: -32px -128px;
}

a:active { /* for click/mouse-down state styles */
    url(images/clickStateImage.png); 
    background-position: -32px -128px;
}

关于jquery - 如何使用来自不同图像文件的一个图标?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8047684/

相关文章:

html - 使用 CSS 清除复选框的清除按钮

javascript - 每个 .click( function() {..} ) 都有唯一的 var;

jquery - Html2Canvas 延迟渲染图像而不是按顺序

php - 如何在不事先渲染的情况下收集要在 htmlentities() 函数中使用的代码?

jquery - 堆叠时使用事件的 Bootstrap 选项卡

html - 菜单链接旁边的图标 CSS

ajax - Jquery ajaxSubmit 也执行常规表单提交

javascript 将 id 值获取到变量中

html - 如何编辑表单上提交按钮的大小?

javascript - 使用幻灯片过渡移动 div