如何在父元素中添加背景颜色？

Question

这是我希望结果的原始图像：

我的代码笔如下：

ul.ul_menu_parent li:hover {
  color: orange;
  cursor: pointer;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid header">

 <div class="row">
   <div class="col-md-12 col-sm-12 col-xs-12 ">
     <div class="col-md-10 col-sm-12 col-xs-12">
        <div class='text-right'>
        <span class="module_top"> <b class="phone">+ 84 862 890 890</b></span>
        <span class="module_top"><a href="#" class="register_login">Login </a> / <a href="#" class="register_login">Register </a></span>
        </div>
        
       <nav  class="navbar navbar-default nav_parent" role="navigation">
         <div class="navbar-header">
           <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
             <span class="sr-only">Toggle navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
         </div>
         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
           <ul class="nav navbar-nav ul_menu_parent">
             <li style="margin-top: -5px"><a  href="index.html"><i class="fa fa-home fa-2x" aria-hidden="true"></i></a></li>
             <li><a  href="gioithieu.html">INTRO</a></li>
           </ul>
         </div>
      </nav>
    </div>
  </div>
</div>

它只是像这样徘徊：

你可以看到绿色我只悬停了很棒的图标元素;我无法将鼠标悬停在父div中的图像显示中。

Answer 1

你的css需要像这样添加：

ul.ul_menu_parent li:hover i {
 color: orange;
 cursor: pointer;
}

Answer 2

如果要在悬停时更改背景颜色。使用这个css代码：

ul.ul_menu_parent li:hover {
  background-color: orange;
  cursor: pointer;
  float:left; 
  display:block;
}

你需要删除margin-top：-5px in li。

Answer 3

我在jsfiddle中添加了你的代码，请检查一下：

 <a href="https://jsfiddle.net/balanuidev/vtdtvkn1/">DEMO</a>