image hover

http://stackoverflow.com/questions/28524553/on-hovercontent-css-tag-is-not-working-in-firefox-and-ie/

by Ram Tobolski

HTML

<ul class="navigation">
<li id="explore" onclick="cl()">&nbsp</li>
<li id="material" onclick="cl()">&nbsp</li>
<li id="team" onclick="cl()">&nbsp</li>
<li id="contact" onclick="cl()">&nbsp</li>
<li id="merchandise" onclick="cl()">&nbsp</li>
</ul>

CSS

.navigation{
list-style:none;
padding-top:10px;
}
.navigation li{
text-align:center;
    height: 70px;
margin-bottom:0px;
cursor:pointer;
}

#explore {
    background: url('http://thunderstorm999.byethost9.com/images/explore.png') center no-repeat;
}
#material {
    background: url('http://thunderstorm999.byethost9.com/images/material.png') center no-repeat;
}
#team {
    background: url('http://thunderstorm999.byethost9.com/images/team.png') center no-repeat;
}
#contact {
    background: url('http://thunderstorm999.byethost9.com/images/contact.png') center no-repeat;
}
#merchandise {
    background: url('http://thunderstorm999.byethost9.com/images/merchandise.png') center no-repeat;
}

#explore:hover {
    background: url('http://thunderstorm999.byethost9.com/images/explore-hover.png') center no-repeat;
}
#material:hover {
    background: url('http://thunderstorm999.byethost9.com/images/material-hover.png') center no-repeat;
}
#team:hover {
    background: url('http://thunderstorm999.byethost9.com/images/team-hover.png') center no-repeat;
}
#contact:hover {
    background: url('http://thunderstorm999.byethost9.com/images/contact-hover.png') center no-repeat;
}
#merchandise:hover {
    background: url('http://thunderstorm999.byethost9.com/images/merchandise-hover.png') center no-repeat;
}

JavaScript

function cl(){
window.open("http://www.wikipedia.org");
}