Блог

Главная - Вопросы по программированию - Как заставить наведение работать для всей строки, включая плавающий значок

Как заставить наведение работать для всей строки, включая плавающий значок

#html #css

#HTML #css

Вопрос:

Я хочу сделать наведение для всей строки, но в моем коде ниже наведение работает только для текста. Я хочу сделать это для всей строки, включая 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 /

Как я должен изменить свой код, чтобы устранить проблему?

Комментарии:

1. К вашему сведению, я добавил соответствующий код из скрипки во фрагмент, чтобы мы могли видеть подменю. Для дальнейшего использования весь код, который применяется к проблеме, должен быть включен непосредственно в сам вопрос (вы включили свой HTML, но CSS также был важен!). Внешние ссылки могут со временем прерываться или меняться, и вопрос не был бы полезен для других пользователей, если бы это произошло 🙂

Ответ №1:

Вы можете использовать класс display:inline-block; to .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>

Ответ №2:

Вам нужно применить CSS для hover применения к элементу блока, который включает текст и caret (на данный момент они находятся во встроенном элементе, а курсор плавает из родительского).

Вы можете добиться этого, создав span.treeparent блочный элемент, например block или inline-block 

 .menu-text li span{
  display: block;
}

Если вы также хотите, чтобы эффект наведения применялся к элементам в выпадающем списке, вы можете применить тот же стиль, что и .treeparent:hover вот так:

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

Рабочий пример: (Обратите внимание, что при превращении span в блочный элемент теперь также применяется стиль CSS, который вы использовали с заполнением, шириной и т.д., Который не работает со встроенным элементом)

 $(".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;
  background: #ddd;
}

.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;
  background: #CFB;
  }

.menu-text li span{
  display: block;
}

.treeparent:hover, 
.nested.nav li: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>

Комментарии:

1. Существует проблема с вашим ответом. Когда я нажимаю на указатель мыши, это не работает. Он должен щелкнуть по заголовку меню. Мой ожидаемый результат заключается в том, что при нажатии должна отображаться вся строка вывода.

2. @user_v12 Хорошо, я изменю его, чтобы он работал с этим… Я не включил JS, так как не знал, что это важно 🙂

3. Мой проверенный код хорошо работает на обычном экране ноутбука. Но когда я использую дополнительный монитор (широкоэкранный с высоким разрешением) menu titles (Menu 1, Menu 2) , на боковой панели есть место. Моя настоящая проблема в этом. Приведенный выше ответ Yore не решает мою проблему.

4. @user_v12 Вы имеете в виду большое пространство справа от вашего меню? Можете ли вы объяснить, какое пространство вы имеете в виду? В коде, который вы нам дали, не упоминается боковая панель, поэтому мы не можем помочь вам решить проблему, если я не знаю, в чем она! Если вы запустите пример, я добавлю фон, чтобы сделать его более четким. Я подозреваю, что проблема может быть в том, что treeparent не может увеличиться более чем на 350px, потому что CSS имеет max-width: 350px;

Ответ №3:

пожалуйста, добавьте отступы справа на 100% к классу treeparent

 .treeparent {
   .............
    padding-right: 100%;

}