如何使用javascript制作悬停样式

Question

我的网站css有div1、img、ul和ul-li部分。我设置了它，这样你就可以看到国家列表，当你点击它时，它会显示子区域和标志图像。我只想在这个国家上空盘旋，但它覆盖了所有三个国家。我现在在ul li上使用悬停，但我需要参考国家列表api，就像我对其他两个所做的那样。如何在javascript中创建引用？这是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

如果你想对btn应用悬停效果，只需复制btn的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标记中添加一个类，例如'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