Ho provato a fare così:
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>hovered - selected</title>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#vynil
{
width:86px;
height:33px;
cursor:pointer;
background-image:url(pulsante%20non%20selezionato.png);
}
#vynil.hovered
{
background-image: url(pulsante%20selezionato_cursore%20sopra.png);
}
#vynil.selected
{
background-image: url(pulsante%20selezionato_pennello.png);
}
#digital
{
width:86px;
height:33px;
cursor:pointer;
background-image: url(pulsante%20non%20selezionato_02.png);
}
#digital.hovered
{
background-image: url(pulsante%20selezionato_cursore%20sopra02.png);
}
#digital.selected
{
background-image: url(pulsante%20selezionato_pennello_02.png);
}
</style>
<script type="text/javascript">
$(function() {
$("#vynil").hover(
function() {
//hover in
$(this).addClass("hovered");
},
function() {
//hover out
$(this).removeClass("hovered");
}).click(
function() {
$("#digital").removeClass("selected");
$(this).addClass("selected");
}
);
});
$(function() {
$('.classeDiv').hover(
function() {
//hover in
$(this).addClass("hovered");
},
function() {
//hover out
$(this).removeClass("hovered");
})
.click(function() {
$('.selected').removeClass("selected");
$(this).addClass(".selected");
});
});
</script>
</head>
<body>
<div id="vynil" class="classeDiv">
</div>
<div id="digital" class="classeDiv">
</div>
</body>
</html>
ma non và...