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

这是原始图像，我希望结果如下所示：



我的代码笔像：

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中的图片展示上。

最佳答案

您的CSS需要这样添加：

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