Question

我有一个鼠标悬停功能，可以更改li元素范围的背景颜色，但背景颜色更改只会更改范围文本的背景，而不会更改整个长度列。如何在不更改li元素的背景颜色的情况下将背景颜色扩展到列的整个长度。我不想更改li元素的背景颜色，因为li元素可能包含子元素ul和li元素，它们的背景颜色我不想更改。

JSFiddle：https://jsfiddle.net/8d965kbd/

HTML：

<li>
  <span class="text">HIGHLIGHT FULL LENGTH (DO NOT HIGHTLIGHT WITH BELOW HIGHTLIGHT)</span>
  <ul>
    <li>
        <span class="text">HIGHLIGHT FULL LENGTH (DO NOT HIGHTLIGHT WITH ABOVE HIGHTLIGHT)</span>
    </li>
  </ul>
</li>

jQuery的：

$(function(){
      $(document).on({
              mouseenter: function () {
                      $(this).css('background-color', 'green');
              },
              mouseleave: function () {
                      $(this).css('background-color', 'white');
              }
      }, ".text");
 });

Answer 1

可能是这样的：https://jsfiddle.net/vtoe5eqx/1/

display:inline-block; //add it to the text class

Answer 2

您可以将display:block;添加到范围内。

https://jsfiddle.net/8d965kbd/3/

Answer 3

而不是使用[String]代替<span>，原因是<div>只是一个内联块元素，而<span>是一个块元素。含义<div>宽度默认为<span>，其宽度仅基于内容，auto将宽度设置为<div>，无论内容如何，这就是您申请时的原因对100%进行background-color更改，只会按其宽度填充。

更新：您还可以使用其他块元素作为<span>之外的替代方案，例如<div> <p>

跨栏文本长度（或li）

3 个答案: