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

Question

我的网站 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);
}

Answer 1

如果您想将悬停效果应用到按钮，只需复制按钮的 class/id

和您的参考代码片段

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

}

<button id="hover"> HOVER ME </button>

告诉我好不好

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

所以它是一个代码片段列表

Answer 3

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

所以你可以做的是在 li 中的 u 标签中添加一个 class 例如'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

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

How to make hover styling with javascript?

html

javascript

css

hover