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

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;
}