Mi sitio web css tiene las secciones div1, img, ul y ul li. Lo tengo configurado para que veas la lista de países y cuando haces clic te muestra la subregión y la imagen de la bandera. Quiero desplazarme solo por el país, pero cubre los tres. Estoy usando el cursor sobre el ul li en este momento, pero necesito hacer referencia a la API de la lista de países, como pude hacer con los otros dos. ¿Cómo creo esa referencia en javascript? Aquí está el 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); }si desea aplicar el efecto de desplazamiento a un btn, simplemente copie la clase/id de btn
y fragmento de código para su referencia
#hover:hover{ background : purple; } #hover{ background : black; color : white } <button id="hover"> HOVER ME </button>dime si esta bien o no
Lista:
#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>Así que es una lista de fragmentos de código
Está sucediendo de esa manera porque la imagen de la bandera del país también es secundaria en la etiqueta li a la que hizo referencia en el css.
Entonces, lo que puede hacer es agregar una clase a la etiqueta u en la li , por ejemplo 'country-name' . Vea abajo:
// ... 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>" } // ... Luego, en el css, cambie ul li: a .country-name , vea a continuación
.country-name:hover{font-size: 3em}Prueba aquí: jsfiddle