Isaac Palacio Isaac Palacio - 4 days ago 6
jQuery Question

Changing style through hover?

I have modified the text with the property: visibility and it does not work :-(

I have this simple code, but it is not working:



$("#text").hover(function() {
//mouse enter
$("#blackbox").css({
"visibility": "visible"
});
},
function(){
//mouse leave
$("#blackbox").css({
"visibility": "hidden"
});
});

#text {
font-weight: 600;
font-size: 24px;
}
#blackbox {
visibility: hidden;
background-color: black;
height: 100px;
margin: 100px;
width: 100px;
}

<head>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<body>
<h3><a href="#" id"text">Pasa el ratón:</a></h3>
<div id="blackbox"></div>
</body>





Not working
What is the problem?

How do I, so that when the mouse passes the link, the picture changes color?

Answer

Try to use .hover(handleIn, handleOut) instead of. Moreover, be careful of you jQuery selector.

$("#blackbox") will select tag with id="blackbox"

$("blackbox") will select tag blackbox

       <blackbox></blackbox>

       $("#text").hover(function() {
                  //mouse enter
                  $("#blackbox").css({				
                             "background-color": "yellow"
                  });
       }, 
                  function() {
                  //mouse leave
                  $("#blackbox").css({					
                             "background-color": "black"
                  });
           }
);
#text {
   font-weight: 600;
  font-size:24px;
}

#blackbox {
    background-color: black;
    height: 100px;
    margin: 100px;
    width: 100px;    
}
<head>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<body>
  <h3><a href="#" id="text">Pasa el ratón:</a></h3>
  <div id="blackbox"></div>
</body>

Comments