How to change the radius of the edge of my navbar when the mouse passes

Question

How to change the radius of the edge of my navbar when the mouse passes

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I have a problem, I am currently using bootstrap and navbar, the boot strap I call it this way:

 <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

the navbar code is as follows:

<nav class="colorlib-nav" role="navigation" >
        <nav class="navbar navbar-default " style="position: fixed;background-color: #ff3333;margin: 25% 0px 0px 95.5%; border-radius: 40px">
       <ul class="nav justify-content">
       <li><a href="grafi_index_2.php"><i class='glyphicon glyphicon-signal' style="font-size: 20px"></i></a></li>
       <li><a href="registro3.php"><i class='glyphicon glyphicon-list-alt' style="font-size: 20px"></i></a></li>
       <li><a href="grafi_index_2.php"><i class='glyphicon glyphicon-envelope' style="font-size: 20px"></i></a></li>
       <li><a href="registro3.php"><i class='glyphicon glyphicon-glass' style="font-size: 20px"></i></a></li>
      </ul>
   </nav>
 </nav>

here I am putting the edges in a curve, as you can see in the following image:

but when I pass the mouse pointer it looks like this:

How would I make the mouse pointer that I read come out curvilinearly of the same radius size that I put on the edge of the navbar?

html bootstrap

asked by Kevincs7 07.09.2018 в 21:56

source

2 answers

Unable to install .NET Framework 3.5 Service Pack Validate that CKEDITOR is not empty

score 0 · Answer 1

link

Good morning; using the hover class of bootstrap you can make the change without much more, so that you better compensate you I leave you examples in the link above

or using pure css

a:hover { 
    background-color: yellow;
}

score 0 · Answer 2

Here I leave what you need, I hope it serves you:

li a:hover{
  background:none !important;
  color:white;
}

 <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

<nav class="colorlib-nav" role="navigation" >
        <nav class="navbar navbar-default " style="position: fixed;background-color: #ff3333;margin: 2% 0px 0px 15.5%; border-radius: 40px">
       <ul class="nav justify-content">
       <li><a href="grafi_index_2.php"><i class='glyphicon glyphicon-signal' style="font-size: 20px"></i></a></li>
       <li><a href="registro3.php"><i class='glyphicon glyphicon-list-alt' style="font-size: 20px"></i></a></li>
       <li><a href="grafi_index_2.php"><i class='glyphicon glyphicon-envelope' style="font-size: 20px"></i></a></li>
       <li><a href="registro3.php"><i class='glyphicon glyphicon-glass' style="font-size: 20px"></i></a></li>
      </ul>
   </nav>
 </nav>