[英]How can I use CSS or Javascript to switch images on mouseover as simple and lightweight as possible?
我试图在鼠标悬停时将一个图像更改为另一个图像。 具体来说，当访客将鼠标悬停在以下位置时：
图像将更改为：
当前代码
我想做的尽可能轻巧。 但是，背景图像CSS不适用于我。 我的代码如下：
<div id="featured-box-right"><a href="/videos/"
target="_self"><img src="../images/box-featured-home-right.png" title="videos"
alt="videos" width="300" height="150"></a></div>
但是当我对CSS执行此操作时：
#featured-box-right a:hover
{
background-image: url(../images/box-featured-home-right-hover.png);
}
效果不正确。 这不是背景。 这是真实的图像。 我将如何尽可能轻量地实现这一目标的任何指导将不胜感激！
轻量级的方法是使用CSS，并使用div的属性background-image ：
<div id="featured-box-right"></div>
CSS：
#featured-box-right {
width: 300px;
height: 150px;
background-image: url('http://i.stack.imgur.com/OywDf.png');
}
#featured-box-right:hover {
background-image: url('http://i.stack.imgur.com/aRJOk.png');
}
您应该使用css图像精灵技术，不要在此处使用css背景属性使用img标签。 您应该尝试以下操作。 您可以使用完全取决于您的cllass或id或父子关系。
<div id="featured-box-right">
<a href="/videos/" target="_self" id="img1"></a>
</div>
CSS：
#img1
{
background: url(../images/box-featured-home-right.png);
}
#img1:hover
{
background: url(../images/box-featured-home-right-hover.png);
}
完全删除<img/>标记，然后尝试使用此CSS。
#featured-box-right a {
background-image: url(../images/box-featured-home-right.png);
}
#featured-box-right a:hover {
background-image: url(../images/box-featured-home-right-hover.png);
}
CSS Sprites是一种使用background-image （设置了宽度和高度）并调整背景位置以仅显示需要显示的部分的技术。 这样，您可以使用单个图像并显示大量不同的图形，从而节省server requests并加快page load时间 ：
HTML：
<img src="images/arrow-sprite.png" alt="arrow" class="clip pos-1" />
CSS：
.clip { position: absolute; top: 0; left: 0; }
.pos-1 { clip:rect(0 48px 48px 0); }
.pos-2 { clip:rect(0 96px 48px 48px); left: -48px; }
.pos-3 { clip:rect(48px 48px 96px 0); top: -48px; }
.pos-4 { clip:rect(48px 96px 96px 48px); top: -48px;
left: -48px; }
从这里走
您可以删除<img>标记并使用CSS背景iamge方法，但是您需要将2张图片组合为一张（顶部一张，底部一张）
接下来，您需要使用以下代码：
#featured-box-right {
width: 300px;
height: 150px;
background-image: url(image url here) center top;
}
#featured-box-right:hover {
background-image: url(image url here) center bottom;
}
使用此方法仅需一张图片
不需要图像（背景图像或其他图像）。
这只相当于两张图片总和的3.84％：
http://fiddle.jshell.net/gWytK/show/ ：
<!doctype html>
<html>
<head>
<title></title>
<style>
body {
margin: 8px;
}
#links {
list-style: none;
margin: 0;
padding: 0;
display: block !important;
display: inline-block;
overflow: hidden;
}
#links li {
float: left;
width: 300px;
height: 150px;
overflow: hidden;
background: #000000;
border-radius: 20px;
}
#links a {
display: block;
font: bold 30px/30px 'comic sans ms', sans-serif;
padding: 40px 66px 100px;
color: #5496ff;
text-decoration: none;
text-transform: capitalize;
text-shadow: 0 0 100px #ffffff, 0 0 100px #ffffff;
}
#links a:after {
content: ' >>';
}
#links a:hover,
#links a:focus {
color: #1b1b1b;
background: #5496ff;
text-shadow: none;
}
</style>
</head>
<body>
<ul id="links">
<li>
<a href="videos/">Our video collection</a>
</li>
</ul>
</body>
</html>
CSS中没有image属性。 为了获得理想的效果，您应该将其替换为background-image然后从HTML代码中删除img标签。
#featured-box-right
{
background-image: url(../images/box-featured-home-right.png);
}
#featured-box-right:hover
{
background-image: url(../images/box-featured-home-right-hover.png);
}
如何使用鼠标悬停（或悬停）以便在 go 在不同的文本上显示不同的图像？ JAVASCRIPT
[英]How do I use mouseover (or hover) so that I can display different images when I go over different texts? JAVASCRIPT
如何在使用javascript创建的不同图像中使用不同的CSS样式？
[英]How can use different css styles in different images created with javascript?
如何在使用 JavaScript 的 switch case 语句中使用范围？
[英]How can I use ranges in a switch case statement using JavaScript?
如何在激活 CSS ":hover" 的纯 JavaScript 中模拟鼠标悬停？
[英]How do I simulate a mouseover in pure JavaScript that activates the CSS ":hover"?
javascript：可以在iPhone上使用touchmove模仿鼠标悬停吗？
[英]javascript: possible to use touchmove to mimic mouseover on iphone?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.