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

Posted 2023-03-06

【中文标题】如何使用 javascript 制作悬停样式？

【英文标题】：How to make hover styling with 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然后点击保存生成一个链接，然后将链接附加到您的问题。

好的，我想我明白了

...我想只在国家上空悬停，“但它会覆盖所有三个”你在这里说的是哪三个。

【参考方案1】：

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

并为您的参考编码 sn-p

#hover:hover
background : purple;

#hover
background : black;
color : white

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

告诉我好不好

【讨论】：

它可能会起作用，但它不是一个按钮，它是一个你可以点击的列表

哦，对 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:hoverfont-size: 3em

在这里测试：jsfiddle