Je veux colorer l'élément LI au survol de la souris avec javascript. pour les personnes qui pensent que je peux utiliser Css. Vous avez raison mais pour celui-ci j'ai besoin de Javascript

Voici mon code:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM</title>

</head>
<body>

<p>An unordered list:</p>
<ul id='lijst'>
    <li>Coffee</li>
    <li>Thea</li>
    <li>Milk</li>
</ul>



<p id="demo"></p>

<script>
      window.onload = function() {
        var list = document.getElementById('lijst');
        var y = list.getElementsByTagName('LI');
        list.addEventListener('mouseover', function(e) {

        });
      }


</script>

</body>
</html>

Ainsi, lorsque vous vous déplacez avec votre souris sur du café, du thé ou du lait. Qu'ils seront orange. Mais je n'ai aucune idée de comment.

0
ARVOCI 18 juin 2020 à 11:04

4 réponses

Meilleure réponse
var list
var y 

window.onload = function() {
        list = document.getElementById('lijst');
       y = list.getElementsByTagName('LI');
        for(var i = 0; i<y.length; i++){
        y[i].addEventListener('mouseover', function(e) {
          this.style.color = 'blue'
        });
        y[i].addEventListener('mouseleave', function(e) {
          this.style.color = 'black'
        });
        }
      }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM</title>

</head>
<body>

<p>An unordered list:</p>
<ul id='lijst'>
    <li>Coffee</li>
    <li>Thea</li>
    <li>Milk</li>
</ul>



<p id="demo"></p>

</body>
</html>

Vous n'avez pas besoin de JS pour cela. Cela peut être facilement réalisé par CSS

0
Dibakar Halder 18 juin 2020 à 08:33

La meilleure façon de gérer cette tâche est d'utiliser la propriété hover de CSS. Le code pour cela est

<style>
    li:hover{
     color: orange
            }        
 </style>

Cependant, si vous insistez pour utiliser la propriété mouseover, vous pouvez utiliser la méthode suivante

<script>
        var li = document.getElementsByClassName("item-list");
        li[0].addEventListener('mousedown', function(){
            this.style.color = "orange";
        });
        li[1].addEventListener('mouseover', function(){
            this.style.color = "orange";
        });
        li[2].addEventListener('mouseover', function(){
            this.style.color = "orange";
        });


    </script>
0
Nouman Ahmad 18 juin 2020 à 08:23

Avoir une erreur

var list = document.getElementById('lijst');
var y = x.getElementsByTagName('LI');

Je n'ai pas x var, changez en

var list = document.getElementById('lijst');
var y = list.getElementsByTagName('LI');
0
Vencendor 18 juin 2020 à 08:16
  • vous pouvez simplement utiliser css pour cela.
.list li:hover {
    color : #FF0000
}
<ul class="list">
    <li >Coffee</li>
    <li >Thea</li>
    <li >Milk</li>
</ul>
  • vous pouvez utiliser javascript comme ceci
function hoverList(list) {
  list.style.color = "#FF0000";
}
    <ul class="list">
        <li onmouseover="hoverList(this)">Coffee</li>
        <li onmouseover="hoverList(this)">Thea</li>
        <li onmouseover="hoverList(this)">Milk</li>
    </ul>
2
Hansaka Sandaruwan 18 juin 2020 à 11:17