Que tal a todos, queria saber si me podian dar un poco de ayuda.
Tengo este codigo HTML
Código:
<div class="selector">
<div class="selector_img">
<h1>titulo_proyecto</h1>
<p>texto_proyecto</p>
<p><a href="#" title="Seguir Leyendo">Seguir leyendo »</a></p>
</div>
</div>
Y el CSS es
Código:
.selector {
margin-left: 30px;
margin-bottom: 30px;
width: 700px;
height: 200px;
background-image: url(img/bg_aside.png);
background-position:bottom;
background-repeat: repeat-x;
border-radius: 1.0em;
-webkit-box-shadow: 2px 2px 5px #666;
}
.selector_img {
margin-left: -53px;
width: 760px;
height: 200px;
float:left;
background-image:url(img/flecha_selector.png);
background-position: center left;
background-repeat:no-repeat;
}
.selector_img:hover {
background-image:url(img/flecha_selector_hover.png);
}
.selector h1 {
padding-left: 80px;
font-family: "Days";
text-shadow: 1px 1px 1px #000;
color:#8A7B60;
text-transform:uppercase;
}
.selector p {
padding-left: 100px;
padding-right: 20px;
}
.selector a {
float:right;
text-decoration: none;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 1.1em;
font-weight: bold;
color: #0172AE;
letter-spacing:1px;
text-shadow: 1px 1px 1px #999;
}
.selector a:hover {
text-decoration: underline;
}
Cuyo resultado es esto
Como ven en la screen al pasar el mouse sobre el rectángulo gris la flecha de la izquierda cambia de color (sin mouse arriba = flecha gris, mouse hover = flecha azul)
Se me ocurrió hacer lo siguiente (supongo que usando Jquery):
Que sea una única flecha, que se mueva al recuadro donde esta el mouse.
Alguien tiene idea de como puedo hacer esto? Uso Jquery pero no me termino de dar cuenta como tiene que ser.
Cualquier ayuda sera agradecida.
Slds!