javascript - 列的跨度文本长度(或 li)

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