Switch when hovering the CSS mouse

Asked

Viewed 2,592 times

0

I wanted that when you hover the mouse over the links they have a green background and the white word, but only a green part is left and not the whole background. How do I change my CSS to this, I’ve tried it in many ways

nav#menu ul{
    list-style: none;
    text-transform: uppercase;
    position:absolute;
    top: -10px;
    left: 100px;
}

nav#menu li{	
    display:inline-block;
    background-color:#dddddd;
    padding: 10px;
    margin: 15px;
    transistion: background-color 1s;
}

nav#menu{
    display:block;	
}

nav#menu li:hover{
    background-color:#dddddd;
    padding: 10px;
}

nav#menu a {
    color:black;

}
nav#menu a:hover {
    color:white;
    background-color:green;
    text-decoration:underline;
}
<html>

<head>

<title>ENEM</title>
<link rel="stylesheet" type="text/css" href="css1.css">

</head>

<body>

    <nav id="menu">
      <ul>
        <li><a href="home.html">HOME</a></li>
        <li><a href="enem.html">ENEM</a></li>
        <li><a href="inscricoes.html">INSCRICOES</a></li>
        <li><a href="preparacao.html">PREPARACAO</a></li>
      </ul>
    </nav>
    
</body>

</html>

html css

3 answers

1

nav#menu ul{
    list-style: none;
    text-transform: uppercase;
    position:absolute;
    top: -10px;
    left: 100px;
}

nav#menu li{	
    display:inline-block;
    background-color:#dddddd;
    padding: 10px;
    margin: 15px;
    transistion: background-color 1s;
}

nav#menu{
    display:block;	
}

nav#menu a {
    color:black;
}

nav#menu li:hover {
    background-color:#dddddd;
    padding: 10px;
    color:white;
    background-color:green;
    text-decoration:underline;
}

nav#menu li:hover  a{
    color:white;
    text-decoration:underline;
}
<html>

<head>

<title>ENEM</title>
<link rel="stylesheet" type="text/css" href="css1.css">

</head>

<body>

    <nav id="menu">
      <ul>
        <li><a href="home.html">HOME</a></li>
        <li><a href="enem.html">ENEM</a></li>
        <li><a href="inscricoes.html">INSCRICOES</a></li>
        <li><a href="preparacao.html">PREPARACAO</a></li>
      </ul>
    </nav>
    
</body>

</html>

0

It is because element "a" does not have the display property as block by default, so it was only in a green part, it was with the inline display, so I put to change color element li.

nav#menu ul{
    list-style: none;
    text-transform: uppercase;
    position:absolute;
    top: -10px;
    left: 100px;
}

nav#menu li{	
    display:inline-block;
    background-color:#dddddd;
    padding: 10px;
    margin: 15px;
    transistion: background-color 1s;
}

nav#menu{
    display:block;	
}

nav#menu li:hover {
    color:white;
    background-color:green;
    text-decoration:underline;
}

nav#menu li:hover a{
    color:white;
}

nav#menu a {
    color:black;

}
nav#menu a:hover {
    color:white;
    background-color:green;
    text-decoration:underline;
}
<html>

<head>

<title>ENEM</title>
<link rel="stylesheet" type="text/css" href="css1.css">

</head>

<body>

    <nav id="menu">
      <ul>
        <li><a href="home.html">HOME</a></li>
        <li><a href="enem.html">ENEM</a></li>
        <li><a href="inscricoes.html">INSCRICOES</a></li>
        <li><a href="preparacao.html">PREPARACAO</a></li>
      </ul>
    </nav>
    
</body>

</html>

0


Personally I think it’s best in your case to have the links from the menu with display:block and occupy the entire space of the item. This gives better user experience as the clickable area is the whole button and not just the text.

Example (I commented on the lines I changed):

nav#menu ul{
    list-style: none;
    text-transform: uppercase;
    position:absolute;
    top: -10px;
    left: 100px;
}

nav#menu li{	
    display:inline-block;
    background-color:#dddddd;
    /*padding:10px*//*retirei este daqui*/
    margin: 15px;
    transistion: background-color 1s;
}

nav#menu{
    display:block;	
}

nav#menu li:hover{
    background-color:#dddddd;
    /*padding:10px;*//*retirei este pois já está fixo na regra normal do a*/
}

nav#menu a {
    color:black;
    display:block; /*display:block adicionado*/
    padding:10px; /*padding transferido do li para o a*/
}
nav#menu a:hover {
    color:white;
    background-color:green;
    text-decoration:underline;
}
<html>

<head>

<title>ENEM</title>
<link rel="stylesheet" type="text/css" href="css1.css">

</head>

<body>

    <nav id="menu">
      <ul>
        <li><a href="home.html">HOME</a></li>
        <li><a href="enem.html">ENEM</a></li>
        <li><a href="inscricoes.html">INSCRICOES</a></li>
        <li><a href="preparacao.html">PREPARACAO</a></li>
      </ul>
    </nav>
    
</body>

</html>

Note how the entire menu link area is clickable.

  • thank you I will mark your reply as the best

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.