Good I have the following problem, I'm making a page, and I have two labels and I want that when I put the pointer over one of them, I just see the other label, which has an icon, some idea?
<a href="edit.php">Editar</a><a href="" class="color"><i class="material-icons">delete</i></a>
$(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> does not undo the first ... that stays, and the second appears to the side
.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> I only assigned to the label the events without considering the ones contained in the class "color", also, in that class by default I put it hidden.
$("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> It can be done with CSS pure% using a container for the links and at the moment you do hover the second link appears:
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:
A different and simpler solution since it was the first solution later duplicated .
We use the selector + adjacent, which selects the next element which is just behind in the code HTML and without needing a container.
The second link is shown only if we are on top of the first one.
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>