отображает текст элемента div на mouseover

У меня есть несколько элементов div в моем коде, и мне нужно отобразить текст каждого элемента div при наведении в углу страницы. Я добавил onmouseover для каждого div и попытался создать скрипт. Итак, это то, что я достиг, так как в настоящее время:отображает текст элемента div на mouseover

<!DOCTYPE html> 
<head> 
<title> Periodic Table </title> 

<script type="text/javascript"> 

function showMore(){ 
document.getElementsByClassName("number").innerHTML = /* div txt here */ 
document.getElementsByClassName("electroneg").innerHTML = /* div txt here */ 
document.getElementsByClassName("couch").innerHTML = /* div txt here */ 
document.getElementsByClassName("symbol").innerHTML = /* div txt here */ 
document.getElementsByClassName("name").innerHTML = /* div txt here */ 
document.getElementsByClassName("massatom").innerHTML = /* div txt here */ 
} 
</script> 

</head> 

<body> 
<div onmouseover="showMore()" class="elementChim left"> 
     <div class="number">1</div> 
     <div class="electroneg">2,1</div> 
     <div class="couch"> 
      <div>1</div> 
     </div> 
     <div class="symbol gaz">H</div> 
     <div class="name">Hydrogen</div> 
     <div class="massatom">1,0088</div> 
    </div> 

    <div onmouseover="showMore()" class="elementChim right"> 
     <div class="number">2</div> 
     <div class="symbol gaz">He</div> 
     <div class="name">Helium</div> 
     <div class="masseatom">4,002</div> 
     <div class="electroneg"></div> 
     <div class="couch"> 
      <div>2</div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

Я не уверен, если это нормально использовать innerHTML каждый раз. Может кто-нибудь предложить некоторые идеи?

Я хочу получить что-то вроде this.

Но мне нужно всего лишь отобразить текст каждого элемента div в углу страницы.

Большое спасибо!

источник

2016-04-09 John Meftali

вы также можете предоставить css? или загрузите свой проект на https://jsfiddle.net пожалуйста :) – semanser

Каждый раз, когда вы установили innerHTML браузер должен проанализировать то, что вы установите его в качестве. Это имеет значение только при установке большого количества текста. Если вам не нужно вставлять HTML, вы можете вместо этого использовать textContent.

Для отображения дивы данных из химических дивы элементов можно использовать document.cloneNode, чтобы сделать копию элементов внутри химического элемента дивы и добавить их в угол:

var corner; 
 
function showMore() { 
 
    // Empty corner 
 
    corner.innerHTML = ""; 
 
    // Go through the children of the moused over element 
 
    for (var i = 0; i < this.children.length; i++) { 
 
    // Clone and append them to the corner 
 
    corner.appendChild(this.children[i].cloneNode(true)); 
 
    } 
 
} 
 

 
// When elements can be accessed 
 
document.addEventListener("DOMContentLoaded", function() { 
 
    // Select chemical element elements 
 
    var chemicalElementDivs = document.getElementsByClassName("elementChim"); 
 
    for (var i = 0; i < chemicalElementDivs.length; i++) { 
 
    // Add listeners to them 
 
    chemicalElementDivs[i].addEventListener("mouseover", showMore); 
 
    } 
 
    corner = document.getElementById("corner") 
 
});

.elementChim { 
 
    padding-bottom: 5px; 
 
    border-bottom: 1px solid black; 
 
} 
 
#corner { 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    width: 100px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
    background: white; 
 
}

<div class="elementChim left"> 
 
    <div class="number">1</div> 
 
    <div class="electroneg">2,1</div> 
 
    <div class="couch"> 
 
    <div>1</div> 
 
    </div> 
 
    <div class="symbol gaz">H</div> 
 
    <div class="name">Hydrogen</div> 
 
    <div class="massatom">1,0088</div> 
 
</div> 
 

 
<div class="elementChim right"> 
 
    <div class="number">2</div> 
 
    <div class="symbol gaz">He</div> 
 
    <div class="name">Helium</div> 
 
    <div class="masseatom">4,002</div> 
 
    <div class="electroneg"></div> 
 
    <div class="couch"> 
 
    <div>2</div> 
 
    </div> 
 
</div> 
 
<div id="corner"></div>

источник

2016-04-09 20:39:01 metarmask

Большое спасибо! Я понимаю это сейчас –

Вы можете использовать атрибут HTML-title.

<div title="Your mouseover-Text here"></div>

Или, если вы хотите, чтобы решить эту проблему с JavaScript вы можете искать

createElement() - метод

источник

2016-04-09 20:00:31

Большое вам спасибо! –

Вы можете достичь этого, используя только селектор CSS :hover так:

HTML:

<div class="number"> 
    <span>1</span> 
</div> 

<div class="electroneg"> 
    <span>2,1</span> 
</div>

CSS:

.number span {opacity:0;} 
.number:hover span {opacity:1;} 

.electroneg span {opacity:0;} 
.electroneg:hover span {opacity:1;}

jsFiddle с выше кодами: https://jsfiddle.net/AndrewL32/be2hqqwx/1/

источник

2016-04-09 20:15:04

К сожалению, мне нужно использовать JS. Большое вам спасибо за этот пример. –

отображает текст элемента div на mouseover

ответ

Смежные вопросы