Блог

Главная - Вопросы по программированию - Можете ли вы выполнить цикл по элементам и применить функцию наведения курсора мыши?

Можете ли вы выполнить цикл по элементам и применить функцию наведения курсора мыши?

#javascript #html #loops #onmouseover

#javascript #HTML #циклы #onmouseover

Вопрос:

Пытаюсь сделать так, чтобы при наведении курсора мыши на элемент в навигаторе он выделялся жирным шрифтом при наведении курсора мыши. Я знаю, что есть способы сделать это на других языках, но я пытаюсь выучить JS.

 <body>
        <p>
        If you ask I will give you:
        </p>
        <ul id = 'nav_1'>
            <li>Some nice chocolate cake</li>
            <li>A fresh-brewed cup of coffee</li>
            <li>An honest compliment</li>
            <li>A brand new Porsche</li>
        </ul>
        <script type="text/javascript">
            "use strict";   
            const nav1 = document.getElementByID('nav_1');
            const listItems = nav1.getElementsByTagName("li");
            
            for(let i = 0;i<listItems.length;i  ){
                listItems[i].onmouseover = function(){
                    document.listItems[i].style.fontWeight = "bold";
                }
                listItems[i].onmouseleave = function(){
                    document.listItems[i].style.fontWeight = "normal";
                }
            }
        </script>
    </body>

Комментарии:

1. Привет, Майкл, если один из приведенных ниже ответов решил вашу проблему, пожалуйста, примите один из них, чтобы закончить этот вопрос. Спасибо!

Ответ №1:

Привет, Майкл, и добро пожаловать в StackOverflow.

Для этого я бы рекомендовал вам использовать CSS вместо JS. Так проще и эффективнее

 #nav_1 li:hover { /* Bold li element on hoverin nav_1 elements */
    font-weight: bold;
} 
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
    If you ask I will give you:
    </p>
    <ul id = 'nav_1'>
        <li>Some nice chocolate cake</li>
        <li>A fresh-brewed cup of coffee</li>
        <li>An honest compliment</li>
        <li>A brand new Porsche</li>
    </ul>
</body>
</html>

Это было бы решением JS. Ваша проблема в обратном вызове. document не имеет переменной listItems , с которой вы могли бы ее спутать window . В getElementByID нем также должна быть опечатка getElementById , функции JS чувствительны к регистру.

 <body>
    <p>
    If you ask I will give you:
    </p>
    <ul id = 'nav_1'>
        <li>Some nice chocolate cake</li>
        <li>A fresh-brewed cup of coffee</li>
        <li>An honest compliment</li>
        <li>A brand new Porsche</li>
    </ul>
    <script type="text/javascript">
        "use strict";
        const nav1 = document.getElementById('nav_1');
        const listItems = nav1.getElementsByTagName("li");

        for(let i = 0;i<listItems.length;i  ){
            listItems[i].onmouseover = function(e){
                listItems[i].style.fontWeight = "bold";
            }
            listItems[i].onmouseleave = function(e){
                listItems[i].style.fontWeight = "normal";
            }
        }
    </script>
</body>

Ответ №2:

Произошла небольшая опечатка getElementByID , последняя буква должна быть строчной d . Затем удалите document listItems переменную.

Как указал Виталий, CSS был бы лучшим способом обработки (никаких сценариев не требовалось), но придерживаясь javascript:

 "use strict";

const nav1 = document.getElementById('nav_1');
const listItems = nav1.getElementsByTagName("li");

for(let i = 0; i < listItems.length; i  ){
    listItems[i].onmouseover = function(){
       listItems[i].style.fontWeight = "bold";
    }
    listItems[i].onmouseleave = function(){
       listItems[i].style.fontWeight = "normal";
    }
} 
 <p>
If you ask I will give you:
</p>
<ul id='nav_1'>
    <li>Some nice chocolate cake</li>
    <li>A fresh-brewed cup of coffee</li>
    <li>An honest compliment</li>
    <li>A brand new Porsche</li>
</ul>

Метки: