Flags with border on hover

Question

Hello I have 3 flags (Italian, german, english) with the purpose to change language for the whole site in future. How can I make a border on a hover effect that could alxo work with IE ?

this is the CCS

.miniflags {
    float:right
    margin : 5px 20px;
    padding-right:10px;
}

and here the HTML

<div id="bandiere">
    <a><img src="ita.png" class="miniflags" /></a>
    <a><img src="ger.png" class="miniflags" /></a>
    <a><img src="eng.png" class="miniflags" /></a>
</div>

Thanx for help

Alex

Answer 1

If you apply the miniflags class to the <a> instead, the :hover pseudoselector will work.

The miniflags class hardly seems necessary. Just remember that :hover works only for links in older versions of IE, so you will need to apply it to the <a> tags instead of the <img>.

<div id="bandiere">
    <a><img src="ita.png" /></a>
    <a><img src="ger.png" /></a>
    <a><img src="eng.png" /></a>
</div>

<style type="text/css">
    #bandiere img {
        float:right
        margin : 5px 20px;
        padding-right:10px;
    }

    #bandiere a:hover, #bandiere a:focus {
        border: 1px solid red;
    }
</style>

Answer 2

IE (until 6 IIRC) only allows hover for links. So you'd have to add the :hover to the a not to the image. The <a> must have a href attribute for this to work of course.

Answer 3

add

.miniflags img:hover {
    border: 1px solid #000;
}

or

.miniflags a:hover {
    border: 1px solid #000;
}

to your css

i believe the 2nd will work better (a:hover)