suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Der umgeschriebene Titel lautet: Ändern Sie den Listentitel als Reaktion darauf, dass sich der Cursor zum Listenelement bewegt

<p>Ich erstelle eine verknüpfte Tabelle und möchte die Tabelle schöner gestalten, indem ich die Hintergrundfarbe der Tabellenüberschrift ändere, wenn ich meine Maus über einen der Listenlinks bewege. Ich weiß jedoch nicht, wie ich die Eigenschaften eines Containerelements ändern kann, indem ich seine kleineren Elemente beeinflusse. Das ist mein Code: </p> <pre class="brush:php;toolbar:false;"><html lang="vi"> <Kopf> <Stil> .toc-container { maximale Breite: 600 Pixel; Schriftfamilie: „Roboto“, serifenlos; Hintergrund: #deff9d; Randradius: 8px; Box-Shadow: 0 4px 11px rgba(0, 0, 0, 0,6); } .toc-container h2.index-heading { Texttransformation: Großbuchstaben; Schriftstärke: normal; Rand: 0 16px; Polsterung oben: 16px; } .Inhaltsverzeichnis { Listenstil: keiner; Polsterung: 0; } .Inhaltsverzeichnis li.Autor li.blog { Hintergrund: #222; Übergang: 400 ms; Listenstil: keiner; } .Inhaltsverzeichnis li.author{ Hintergrundfarbe: grün; } .table-of-contents li.author li:nth-of-type(even).blog { Hintergrund: #2e2e2e; } .table-of-contents li.author li:hover.blog { Hintergrund: #000; } .Inhaltsverzeichnis li a { Textdekoration: keine; Farbe: #fff; Rand links: 24px; Polsterung: 16px 0; Bildschirmsperre; } </style> </head> <Körper> <div class="toc-container"> <h2 class="index-heading">heading</h2> <ul class="table-of-contents"> <li class="author"> <a href="#">Name des Autors</a> <ul> <li class="blog"> <a href="#">Nháp 1</a> </li> </ul> </li> </ul> </div> </body> </html></pre>
P粉131455722P粉131455722446 Tage vor500

Antworte allen(1)Ich werde antworten

  • P粉343408929

    P粉3434089292023-09-05 14:12:54

    我认为使用JavaScript更容易实现这一点,你可以使用元素事件 mouseentermouseleave 来实现样式的改变,也许这可以帮到你。下面是代码:

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

    Antwort
    0
  • StornierenAntwort