不使用Javascript(仅使用CSS)也能达到同样的效果吗?

I'm trying to create a button with icon like this:

我试着用这样的图标来创建一个按钮:

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');
    });
});

My question is: Is Javascript really necessary for such simple functionality, or it can be done using CSS only ?

我的问题是:对于如此简单的功能，Javascript真的是必需的吗?

3 个解决方案

#1

There's a :hover pseudoclass for that.

这里有一个:hover pseuclass。

#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

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

#2

Ya 100%

丫100%

Working demo link

工作演示链接

in the above example you need to use hover and shift

在上面的示例中，您需要使用鼠标悬停和移动

background position

背景位置

uisng css. you can do it without javascript for sure.

uisng css。不用javascript也能做到。

here is working solution dont require any javascript

这里的工作解决方案不需要任何javascript。

html

html

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

css

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;

}

#3

I've made a jsfiddle with "a" tag so hover works in IE too.

我制作了一个“a”标签的jsfiddle，所以hover也可以在IE中工作。

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

The CSS

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;
}

#1