這是可能做同樣的（懸停效果）沒有JavaScript（只有CSS）？

我試圖用圖標like this創建按鈕：這是可能做同樣的（懸停效果）沒有JavaScript（只有CSS）？

HTML：

<div id='button'> 
    <div class='icon'></div> 
    <span>Send Email</span> 
</div>

CSS：

#button { 
    width: 270px; 
    height: 50px; 
    font-size: 1.4em; 
    color: #333; 
    background-color: #555; 
    position: relative; 
} 
#button > .icon { 
    width: 61px; 
    height: 39px; 
    background-image: url('http://i55.tinypic.com/2agsutj.png'); 
    background-repeat: no-repeat; 
    background-position: 0px 0px; 
    position: absolute; 
    left: 40px; 
    top: 5px; 
} 
#button > span { 
    position: absolute; 
    left: 130px; 
    top: 10px; 
} 
#button:hover { 
    color: #fff; 
    cursor: pointer; 
}

JS：

$(function() { 
    $('#button').hover(function() { 
     $('#button > .icon').css('background-position', '0px -39px'); 
    }, function() { 
     $('#button > .icon').css('background-position', '0px 0px'); 
    }); 
});

我的問題是：對於這樣簡單的功能，JavaScript確實非常必要，或者可以使用JavaScript來完成只有CSS？

來源

2010-09-04 Misha Moroshko

這裏有一個:hover僞類。

#button:hover > .icon { 
    background-position: 0px -39px; 
}

http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes
http://www.w3schools.com/css/pr_pseudo_hover.asp

來源

2010-09-04 03:29:01

注意，你想一個http://ie6nomore.com橫幅添加到您的網站，然後。它不支持它。 – BalusC 2010-09-04 03:30:15

太棒了！這正是我所尋找的:) – 2010-09-04 03:41:05

當然，IE6是一個孤兒，即使在MS。 IE9的團隊爲花費在IE6上的僞葬禮送去鮮花。 http://blog.seattlepi.com/microsoft/archives/196608.asp – 2010-09-04 03:53:30

雅100％

Working demo link

在需要使用懸停和移位

上面的例子級

背景位置

uisng的CSS。當然，你可以不用javascript。

這裏是工作液不要求任何JavaScript

HTML

<div id='button'> 
    <span class='icon'>Send Email</span> 
</div>

CSS

#button span{ 
    display:block; 
    padding-left:80px; 
    font-size: 1.4em; 
    color: #333; 
    background-color: #555; 
    line-height:1.4em; 
} 
#button span.icon{ 
    background-image: url('http://i55.tinypic.com/2agsutj.png'); 
    background-repeat: no-repeat; 
    background-position: 0px 0px; 
    width:120px; 
    height:39px; 
} 
#button:hover span{ 
color:#fff; 
}n 
#button:hover span.icon{ 
    background-image: url('http://i55.tinypic.com/2agsutj.png'); 
    background-repeat: no-repeat; 
    background-position: 0px -39px; 

}

來源

2010-09-04 03:30:23

我製作了帶有「a」標籤的jsfiddle，因此懸停在IE中也可以使用。

<div id="button"> 
<a href="#text" name="text">Send Email</a> 
</div>

的CSS

#button { 
    width: 270px; 
    height: 45px; 
    font-size: 1.4em; 
    background-color: #555; 
    position: relative; 

    padding-left: 45px; 
    padding-top: 15px;  
} 

#button a { 
    text-decoration:none; 
    color:#333; 
    padding:5px; 
    padding-left: 65px; 
    background-image: url('http://i55.tinypic.com/2agsutj.png'); 
    background-repeat: no-repeat; 
    background-position: 0px 0px;  
} 

#button a:hover { 
    background-position:0px -39px; 
    color: #fff; 
}

來源

2010-09-04 03:47:48 naikus

這是可能做同樣的（懸停效果）沒有JavaScript（只有CSS）？

回答

相關問題