html - 如何使悬停适用于包括浮动图标在内的整行

Question

我想为整行悬停，但在我下面的代码中，悬停仅适用于文本。我想为包括caret菜单标题在内的整行制作它。

我试过这段代码：

$(".treeparent").click(function () {
    var $tog = $(this).next('.tog');
    $tog.slideToggle();
    if ($tog.hasClass('open')){
        $tog.removeClass('open');
        $(this).removeClass('caret-down');
    }else{
        $tog.addClass('open');
         $(this).addClass('caret-down');
    }

});

ul, #myUL {
    list-style-type: none;
}
  
#myUL {
    margin: 0;
    padding: 0;
}
  
.caret {
    cursor: pointer;
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none;
    font-size: 17px;
}
  
.caret::before {
    font-family: "FontAwesome";
    content: "\f078";
    color: #007BFF;
    margin-right: 10px;
    float:right;
    -moz-transition: transform 0.6s;
    -webkit-transition: transform 0.6s;
    transition: transform 0.6s;
  }
  
.caret-down::before {
    -ms-transform: rotate(-180deg); /* IE 9 */
    -webkit-transform: rotate(-180deg); /* Safari */
    transform: rotate(-180deg);  
}
  
.nested {
    display: none;
    margin: 10px;
}
  
.active {
    display: block;
}

.treeparent {
    /* display: table-cell; */
    overflow: auto;
    max-width: 350px;
    max-height: 350px;
    margin: auto;
    height: 35px;
    font-size: 14px;
    color: #007BFF;
    margin: 3px;
    width: 260px;
    vertical-align:middle;
    padding: 2px;
}

.treeparent:hover {
    background-color: #cee0f5;
    color: black;
    transition: background 0.5s;
}

.flip {
    transform: rotate(-180deg);
}

.ripple {
    background-position: center;
  }

.ripple:hover {
    background: #cee0f5 radial-gradient(circle, transparent 5%, #a8cdf7 1%) center/15000%;
}

.ripple:active {
    background-color: #6eb9f7;
    background-size: 100%;
    transition: background 0s;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #007bff;
    background-color: #f8f9fa!important;
    font-weight: bold;  
}


.nav-item { 
    margin-bottom: -8px; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="myUL">
  <div class="menu-text">
    <li>
      <span class="caret treeparent ripple">Menu 1<i class="fas fa-chevron-down arrow"></i></span>
         <ul class="nested nav nav-pills flex-column tog">
           <li class="nav-item" rel="0">
             <a class="nav-link" href="javascript:window.location.reload(true)">Sub 1</a>
           </li>
           <li class="nav-item" rel="1">
             <a class="nav-link" href="javascript:window.location.reload(true)">Sub 2</a>
           </li>
         </ul>
     </li>
     <li>
      <span class="caret treeparent ripple">Menu 2<i class="fas fa-chevron-down arrow"></i></span>
         <ul class="nested nav nav-pills flex-column tog">
           <li class="nav-item" rel="0">
             <a class="nav-link" href="javascript:window.location.reload(true)">Sub 1</a>
           </li>
         </ul>
     </li>
  </div>
</ul>

您可以重现该问题-> https://jsfiddle.net/gL4ombkt/

我应该如何更改我的代码来解决问题？

标签： htmlcss

Answer 1

你可以display:inline-block;用来.caret{...}上课。

ul,
#myUL {
  list-style-type: none;
}

#myUL {
  margin: 0;
  padding: 0;
}

.caret {
  cursor: pointer;
  -webkit-user-select: none;
  /* Safari 3.1+ */
  -moz-user-select: none;
  /* Firefox 2+ */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
  font-size: 17px;
  display: block;
}

.caret::before {
  font-family: "FontAwesome";
  content: "\f078";
  color: #007BFF;
  margin-right: 10px;
  float: right;
  -moz-transition: transform 0.6s;
  -webkit-transition: transform 0.6s;
  transition: transform 0.6s;
}

.caret-down::before {
  -ms-transform: rotate(-180deg);
  /* IE 9 */
  -webkit-transform: rotate(-180deg);
  /* Safari */
  transform: rotate(-180deg);
}

.nested {
  display: none;
  margin: 10px;
}

.active {
  display: block;
}

.treeparent {
  /* display: table-cell; */
  overflow: auto;
  max-width: 350px;
  max-height: 350px;
  margin: auto;
  height: 35px;
  font-size: 14px;
  color: #007BFF;
  margin: 3px;
  width: 260px;
  vertical-align: middle;
  padding: 2px;
}

.treeparent:hover {
  background-color: #cee0f5;
  color: black;
  transition: background 0.5s;
}

.flip {
  transform: rotate(-180deg);
}

.ripple {
  background-position: center;
}

.ripple:hover {
  background: #cee0f5 radial-gradient(circle, transparent 5%, #a8cdf7 1%) center/15000%;
}

.ripple:active {
  background-color: #6eb9f7;
  background-size: 100%;
  transition: background 0s;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  color: #007bff;
  background-color: #f8f9fa!important;
  font-weight: bold;
}

.nav-item {
  margin-bottom: -8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="myUL">
  <div class="menu-text">
    <li>
      <span class="caret treeparent ripple">Menu 1<i class="fas fa-chevron-down arrow"></i></span>
      <ul class="nested nav nav-pills flex-column tog">
        <li class="nav-item" rel="0">
          <a class="nav-link" href="javascript:window.location.reload(true)">Sub 1</a>
        </li>
        <li class="nav-item" rel="1">
          <a class="nav-link" href="javascript:window.location.reload(true)">Sub 2</a>
        </li>
      </ul>
    </li>
    <li>
      <span class="caret treeparent ripple">Menu 2<i class="fas fa-chevron-down arrow"></i></span>
      <ul class="nested nav nav-pills flex-column tog">
        <li class="nav-item" rel="0">
          <a class="nav-link" href="javascript:window.location.reload(true)">Sub 1</a>
        </li>
      </ul>
    </li>
  </div>
</ul>