How to animate an element on hover

Question

How can I make my

elements grow (and the content changes text size to a higher one), when hovered over? I put them in a class and tried:

<         


        

Answer 1

Using CSS you can add a hover style to the div:

div.container {
    width: 80%;
    background-color: blue;
}

div.container:hover {
    width: 100%;
    background-color: red;
}

See this jsFiddle for a demonstration.

jQuery Solution

Another option that might work for you is jQuery. It's a JavaScript library that simplifies commonly needed functionality such as this. Using jQuery, you can easily add hover effects to the elements:

//hover effect applies to any elements using the 'container' class
$(".container").hover(
    function(){ //mouse over
        $(this).width($(this).width() + 30);
    },
    function(){ //mouse out
        $(this).width($(this).width() - 30);
    }
);

See this jsFiddle for a demonstration.