[英]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.