<p>我正在创建一个链接表格，我希望当我将鼠标移动到列表链接之一时，通过更改表格标题的背景颜色使表格更加漂亮。然而，我不知道如何通过影响其较小元素来更改容器元素的属性。这是我的代码：</p> <pre class="brush:php;toolbar:false;">&lt;html lang=&quot;vi&quot;&gt; &lt;head&gt; &lt;style&gt; .toc-container { max-width: 600px; font-family: &quot;Roboto&quot;, sans-serif; background: #deff9d; border-radius: 8px; box-shadow: 0 4px 11px rgba(0, 0, 0, 0.6); } .toc-container h2.index-heading { text-transform: uppercase; font-weight: normal; margin: 0 16px; padding-top: 16px; } .table-of-contents { list-style: none; padding: 0; } .table-of-contents li.author li.blog { background: #222; transition: 400ms; list-style: none; } .table-of-contents li.author{ background-color: green; } .table-of-contents li.author li:nth-of-type(even).blog { background: #2e2e2e; } .table-of-contents li.author li:hover.blog { background: #000; } .table-of-contents li a { text-decoration: none; color: #fff; margin-left: 24px; padding: 16px 0; display: block; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&quot;toc-container&quot;&gt; &lt;h2 class=&quot;index-heading&quot;&gt;heading&lt;/h2&gt; &lt;ul class=&quot;table-of-contents&quot;&gt; &lt;li class=&quot;author&quot;&gt; &lt;a href=&quot;#&quot;&gt;作者的名字&lt;/a&gt; &lt;ul&gt; &lt;li class=&quot;blog&quot;&gt; &lt;a href=&quot;#&quot;&gt;Nháp 1&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre>

  <script>
    const headerDiv = document.querySelector('.index-heading');
    const blogDiv = document.querySelector('.blog');
    blogDiv.addEventListener('mouseenter', function(e) {
      headerDiv.style.background = 'purple'
    })
    blogDiv.addEventListener('mouseleave', function(e) {
      headerDiv.style.background = '#deff9d'
    })
  </script>