Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia amigos :thumbsup:
Estou usando a evento mousemove para exibir um span
Vai ter uma div com um ex background-color: #FFFFCC;, quando o cliente passar o mouse em cima da div, aparece o nome da cor. O código esta fazendo isso porem ele mostra o nome de todas as corres :upset: eu sei que estou fazendo algo errado mais ainda não achei
Obrigado pessoal
http://nsae01.casimages.net/img/2013/07/10/130710040348948943.jpg
Codigo completo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>nada</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function() {
var moveLeft = 20;
var moveDown = 10;
jQuery('div#trigger').hover(function(e) {
jQuery('span#pop-up').show();
}, function() {
jQuery('span#pop-up').hide();
});
jQuery('div#trigger').mousemove(function(e) {
jQuery("span#pop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
});
});
</script>
</head>
<body>
<dd id="Cores" class="odd" style="display: block;">
<ol>
<li>
<a href="[http://www.alojadobebe.com/roupinhas.html?cores=71](http://www.alojadobebe.com/roupinhas.html?cores=71)">
<span id="pop-up" style="display: inline; top: 474px; left: 240px;">Amarelo</span>
<div id="trigger" style="background-color: #FFFC00;"></div>
</a>
(2)
</li>
<li>
<a href="[http://www.alojadobebe.com/roupinhas.html?cores=70](http://www.alojadobebe.com/roupinhas.html?cores=70)">
<span id="pop-up" style="display: inline; top: 474px; left: 240px;">Azul</span>
<div id="trigger" style="background-color: #0074F7;"></div>
</a>
(16)
</li>
<li>
<a href="[http://www.alojadobebe.com/roupinhas.html?cores=68](http://www.alojadobebe.com/roupinhas.html?cores=68)">
<span id="pop-up" style="display: inline; top: 474px; left: 240px;">Branco</span>
<div id="trigger" style="background-color: #FFFFFF;"></div>
</a>
(10)
</li>
<li>
<a href="[http://www.alojadobebe.com/roupinhas.html?cores=82](http://www.alojadobebe.com/roupinhas.html?cores=82)">
<span id="pop-up" style="display: inline; top: 474px; left: 240px;">Cinza</span>
<div id="trigger" style="background-color: #999999;"></div>
</a>
(1)
</li>
<li>
<a href="[http://www.alojadobebe.com/roupinhas.html?cores=67](http://www.alojadobebe.com/roupinhas.html?cores=67)">
<span id="pop-up" style="display: inline; top: 474px; left: 240px;">Creme</span>
<div id="trigger" style="background-color: #FFFFCC;"></div>
</a>
(2)
</li>
<li>
<a href="[http://www.alojadobebe.com/roupinhas.html?cores=81](http://www.alojadobebe.com/roupinhas.html?cores=81)">
<span id="pop-up" style="display: inline; top: 474px; left: 240px;">Estampado</span>
<div id="trigger" style="background-image: url(/media/filtros-cores/estampado.jpg);"></div>
</a>
(16)
</li>
<li>
<a href="[http://www.alojadobebe.com/roupinhas.html?cores=80](http://www.alojadobebe.com/roupinhas.html?cores=80)">
<span id="pop-up" style="display: inline; top: 474px; left: 240px;">Laranja</span>
<div id="trigger" style="background-color: #FFA500;"></div>
</a>
(3)
</li>
<li>
<a href="[http://www.alojadobebe.com/roupinhas.html?cores=79](http://www.alojadobebe.com/roupinhas.html?cores=79)">
<span id="pop-up" style="display: inline; top: 474px; left: 240px;">Lilás</span>
<div id="trigger" style="background-color: #BAA3F1;"></div>
</a>
(8)
</li>
<li>
<a href="[http://www.alojadobebe.com/roupinhas.html?cores=78](http://www.alojadobebe.com/roupinhas.html?cores=78)">
<span id="pop-up" style="display: inline; top: 474px; left: 240px;">Marrom</span>
<div id="trigger" style="background-color: #703321;"></div>
</a>
(1)
</li>
<li>
<a href="[http://www.alojadobebe.com/roupinhas.html?cores=77](http://www.alojadobebe.com/roupinhas.html?cores=77)">
<span id="pop-up" style="display: inline; top: 474px; left: 240px;">Palha</span>
<div id="trigger" style="background-color: #D7D0B6;"></div>
</a>
(1)
</li>
<li>
<a href="[http://www.alojadobebe.com/roupinhas.html?cores=76](http://www.alojadobebe.com/roupinhas.html?cores=76)">
<span id="pop-up" style="display: inline; top: 474px; left: 240px;">Pink</span>
<div id="trigger" style="background-color: #FF3696;"></div>
</a>
(1)
</li>
<li>
<a href="[http://www.alojadobebe.com/roupinhas.html?cores=75](http://www.alojadobebe.com/roupinhas.html?cores=75)">
<span id="pop-up" style="display: inline; top: 474px; left: 240px;">Preto</span>
<div id="trigger" style="background-color: #000000;"></div>
</a>
(1)
</li>
<li>
<a href="[http://www.alojadobebe.com/roupinhas.html?cores=74](http://www.alojadobebe.com/roupinhas.html?cores=74)">
<span id="pop-up" style="display: inline; top: 474px; left: 240px;">Rosa</span>
<div id="trigger" style="background-color: #F1BCD6;"></div>
</a>
(10)
</li>
<li>
<a href="[http://www.alojadobebe.com/roupinhas.html?cores=73](http://www.alojadobebe.com/roupinhas.html?cores=73)">
<span id="pop-up" style="display: inline; top: 474px; left: 240px;">Verde</span>
<div id="trigger" style="background-color: #79CA01;"></div>
</a>
(4)
</li>
<li>
<a href="[http://www.alojadobebe.com/roupinhas.html?cores=72](http://www.alojadobebe.com/roupinhas.html?cores=72)">
<span id="pop-up" style="display: inline; top: 474px; left: 240px;">Vermelho</span>
<div id="trigger" style="background-color: #D60501;"></div>
</a>
(3)
</li>
</ol>
</dd>
</body>
</html>
<style type="text/css">
#filtros_title {
color: #FFFFFF;
margin-bottom: 3px;
border: 1px solid #CCCCCC;
padding: 0;
background-color: #3DAAFC;
} color: #FFFFFF;
display: block;
background: url("/skin/frontend/default/f002/imagens/drop_dark.png") no-repeat scroll 96% 50% transparent;
padding: 5px;
}#Cores li{
list-style: none;
display: inline-block;
border: 1px solid #CCCCCC;
font-size: 0px;
margin: 2px;
width: 23px;
height: 23px;
padding:2px;
} width: 21px;
height: 21px;
display: inline-block;
border: 1px solid #CCCCCC;
} list-style: none;
} border: 1px solid #CCCCCC;
display: inline-block;
font-size: 15px;
height: auto;
list-style: none outside none;
margin: 2px;
width: auto;
}
span#pop-up {
display: none;
position: absolute;
width: auto;
padding: 10px;
background: #eeeeee;
color: #000000;
border: 1px solid #1a1a1a;
font-size: 90%;
font-size: 14px;
}
</style>Carregando comentários...