列的跨度文本长度（或 li）答案

【问题标题】：span text length of column (or li)列的跨度文本长度（或 li）
【发布时间】：2015-05-20 00:06:43
【问题描述】：

我有一个 mouseover 函数可以改变 li 元素的 span 的背景颜色，但是 background-color 的改变只会改变 span 文本的背景，而不是整个长度列。如何在不更改 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");
 });

【问题讨论】：

标签： javascript jquery html css mouseover

【解决方案1】：

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

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

【讨论】：

如果跨度小于一行，inline-block 将不起作用。

【解决方案2】：

您可以将display:block; 添加到跨度中。

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

【讨论】：

【解决方案3】：

而不是使用<span> 而是使用<div>，原因是<span> 只是一个内联块元素，而<div> 是一个块元素。意思是<span> 的宽度默认为auto，它仅基于内容的宽度，而<div> 将其宽度设置为100%，而不考虑内容，这就是为什么当您为@987654330 应用background-color 更改时@，它只填满它的宽度。

更新：除了<div>，您还可以使用其他块元素作为替代，例如<p> <h1> ~ <h6>

【讨论】：