1

buenas tengo el siguiente problema, estoy realizando una pagina, y tengo dos etiquetas y quiero que al pasar el puntero por encima de una me aparezca, recién me aparezca la otra etiqueta, la cual tiene un icono, alguna idea?

<a href="edit.php">Editar</a><a href="" class="color"><i class="material-icons">delete</i></a>

2
  • puedes detallar mejor tu pregunta porfavor el 30 ene. 2017 a las 22:41
  • perdon si no se a entendio.. de las dos etiquetas que tengo lo que qiero es que la segunda este oculta.. y en el momento que pase el mause por la primer etiqueta, en ese momento recien aparesca la segunda etiqueta
    – FeRcHo
    el 30 ene. 2017 a las 22:47

3 respuestas 3

2

$(function(){

    $('#dos').hide();
    $('div').hover(function(){
        $('div').toggle();
    });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="uno">
   <a href="edit.php">Editar</a>
</div>  

<div id="dos">   
   <a href="" class="color"><i class="material-icons">delete</i></a>
</div>    

no desapersca la primera... que se mantega, y la segunda aparesca al lado

.contenedor{
width:15%;
}

a:first-of-type + a{
visibility: hidden;
}

.contenedor:hover>a:nth-of-type(2){
visibility: visible;
}
<div class="contenedor"> 

   <a href="edit.php" class="uno">Editar</a>

   <a href="" class="color"><i class="material-icons">delete</i></a>
</div>  

2
  • gracias por responder..en realidad es lo que qiero pero, con la diferencia que no desapersca la primera... que se mantega, y la segunda aparesca al lado
    – FeRcHo
    el 30 ene. 2017 a las 23:07
  • muchas gracias por tomarse el tiempo, era lo que necesitava, gracias
    – FeRcHo
    el 31 ene. 2017 a las 0:26
0

Solo asigné a la etiqueta los eventos sin considerar las que contiene la clase "color", asimismo, en dicha clase por defecto lo puse oculto.

$("a").not('.color').mouseover(function() {
   $(this).next().toggle();
}).mouseout(function() {
    $(this).next().hide();
  });
.color{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="edit.php">Editar</a><a href="" class="color"><i class="material-icons">delete</i></a>

0

Se puede realizar con CSS puro usando un contenedor para los links y en el momento que se hacer hover aparece el segundo link:

div { 
  width: 100px; /* contenedor */
}

.esconder {
  visibility: hidden; /* esconde el segundo <a> */
}

div:hover > .esconder {  
  visibility: visible;
}
<div>  
  <a href="#1">Editar</a> 
  <a class="esconder" href="#2" class="color"><i class="material-icons">delete</i></a>    
</div>

EDIT:

Una solución diferente y más simple ya que fue la primera solución posteriormente duplicado.

Usamos el selector + adyacente, el cual selecciona el próximo elemento cual se encuentra justo detrás en el código HTML y sin necesidad de tener un contenedor.

El segundo vinculo se muestra solo si estamos encima del primero.

a {    
    float: left;
    padding-right: 5px;
}

a:hover { color: red; }

.esconder { display: none; }

.mostrar:hover + .esconder,
.esconder:hover {
    display: inline-block;
}
<a class="mostrar" href="#1">Editar</a>
<a class="esconder" href="#2" class="color"><i class="material-icons">delete</i></a>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.