Change the list heading when move the cursor to the list element-CodePudding

I'm creating a table of links, I want the table to be a bit fancier by changing the table heading's background color whenever I move the cursor to one of the list's links. However, I don't know how to change the attribute of the container element by affecting its smaller element. This is my code:

<html lang="vi">
    <head>
        <style>
.toc-container {
    max-width: 600px;
    font-family: "Roboto", 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;
}
        </style>
    </head>
    <body>
        <div >
            <h2 >heading</h2>
            <ul >
                <li >
                    <a href="#">Author's name</a>
                    <ul>
                        <li >
                            <a href="#">Nháp 1</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </body>
</html>

CodePudding user response：

I think it's easier to do this with javascript, you can use Element Event mouseenter and mouseleave to achieve style change, maybe this can help you. code below

  <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>

CodePudding user response：

just use onm ouseover and onm ouseout eventlisteners to both of the lists . i have attached the code snippet you can take a look .

let first=document.getElementById("first")
let second=document.getElementById("second")
let background1=()=>{
    first.style.backgroundColor="red"
}
let background2=()=>{
    second.style.backgroundColor="green"
}
let remover1=()=>{
    first.style.backgroundColor="white"
}
let remover2=()=>{
    second.style.backgroundColor="white"
}

<div >
    <h2 >heading</h2>
    <ul >
        <li   >
            <a href="#" id="first" onm ouseover="background1()" onm ouseout="remover1()">Author's name</a>
            <ul>
                <li  >
                    <a href="#" id="second" onm ouseover="background2()" onm ouseout="remover2()">Nháp 1</a>
                </li>
            </ul>
        </li>
    </ul>
</div>