Is that possible to do the same (hover effect) without Javascript (only CSS)?

Question

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 ?

Nikita Rybak · Accepted Answer · 2010-09-04 03:29:01Z

7

There's a :hover pseudoclass for that.

#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

answered Sep 4, 2010 at 3:29

Nikita Rybak

68.2k22 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

BalusC Over a year ago

Note that you'd like to add a ie6nomore.com banner to your site then. It namely doesn't support it.

Peter Rowell Over a year ago

Of course, IE6 is an orphan, even at MS. The team working on IE9 sent flowers to the pseudo-funeral held for IE6. blog.seattlepi.com/microsoft/archives/196608.asp

Pramendra Gupta · Accepted Answer · 2010-09-04 03:39:56Z

Ya 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.

here is working solution dont require any 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;

}

naikus · Accepted Answer · 2010-09-04 03:47:48Z

1

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

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

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

answered Sep 4, 2010 at 3:47

naikus

24.5k4 gold badges45 silver badges44 bronze badges

Collectives™ on Stack Overflow

Is that possible to do the same (hover effect) without Javascript (only CSS)?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related