如何使用 javascript 制作悬停样式？答案

【问题标题】：How to make hover styling with javascript?如何使用 javascript 制作悬停样式？
【发布时间】：2022-01-19 06:04:27
【问题描述】：

我的网站 css 有 div1、img、ul 和 ul li 部分。我已经设置好了，这样你就可以看到国家列表，当你点击它时，它会显示子区域和标志图像。我想只在这个国家上空悬停，但它会覆盖所有三个。我现在在 ul li 上使用悬停，但我需要参考国家列表 api，就像我对其他两个一样。如何在 javascript 中创建该引用？Here's the jsfiddle

var xhttp = new XMLHttpRequest();
var respJSON = [];
    xhttp.onreadystatechange = function () {
        if(this.readyState == 4 && this.status == 200) {
            resp = this.responseText;
            respJSON = JSON.parse(resp);

            html = document.getElementById("list");
            html.innerHTML = "";

            for(var i=0; i< respJSON.length; i++){
                html.innerHTML += "<li id="+i+" onClick='clickMe("+i+")'><u>" + respJSON[i].name + "</u></li>"

            }
        }
    }
    xhttp.open("GET", "https://restcountries.com/v2/all", true);
    xhttp.send();
   
function clickMe(index) {
  document.querySelectorAll('#list img').forEach(
    function(item) {
      item.remove();
  });
     document.querySelectorAll('#list div1').forEach(
    function(item) {
      item.remove();
  });
        li = document.getElementById(index);
        img = document.createElement("img")
        img.src = respJSON[index].flag;
        li.append(img);        
        let div = document.createElement("div1");
        div.innerText = respJSON[index].subregion;
        li.append(div);
}

【问题讨论】：

你能把它设置成 jsfiddle 吗？所以它可以更好地回答。
我不确定如何添加 jsfiddle？
这里。 jsfiddle.net您可以添加html、css、js然后点击保存生成一个链接，然后将链接附加到您的问题。
好的，我想我明白了
...我想只在国家上空悬停，“但它会覆盖所有三个”你在这里说的是哪三个。

标签： javascript html css hover

【解决方案1】：

如果你想对 btn 应用悬停效果，只需复制 btn 的类/id

并为您的参考编码 sn-p

#hover:hover{
background : purple;
}
#hover{
background : black;
color : white

}

&lt;button id="hover"&gt; HOVER ME &lt;/button&gt;

告诉我好不好

【讨论】：

它可能会起作用，但它不是一个按钮，它是一个你可以点击的列表
哦，对 ul li 也一样

【解决方案2】：

列表：

#hover-eff li {
color : green;
}
#hover-eff li:hover {
color : purple;
}

<ul id="hover-eff">
<li> List - 1 </li>
<li> List - 2 </li>
<li> List - 3 </li>
<li> List - 4 </li>
<li> List - 5 </li>
</ul>

所以它是一个代码 sn-p 列表

【讨论】：

它添加了悬停，但仍然导致标志和子区域也发生变化

【解决方案3】：

之所以会这样，是因为国旗图像也是您在 css 中引用的 li 标记中的子图像。

所以你可以做的是在li 中的u 标签中添加一个类，例如'country-name'。见下文：

// ...
for(var i=0; i< respJSON.length; i++){
    html.innerHTML += "<li id="+i+" onClick='clickMe("+i+")'><u class='country-name'>" + respJSON[i].name + "</u></li>"
}
// ...

然后在css中，将ul li:改为.country-name，见下

.country-name:hover{font-size: 3em}

在这里测试：jsfiddle

【讨论】：