CODEWITHSUNDEEP
javascripthtml
Martin
Martin

Reputation: 109

display the text of div element on mouseover

I have a few div elements in my code and I need to display the text of every div element on hover in the page corner. I've added onmouseover to every div and tried to make a script. So, this is what I have reached since now:

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

I'm not sure if it's ok to use innerHTML everytime. Can anyone offer some insights?

I'd like to get something like this as result.

But I only need to display the text of every div element in the page corner.

Many thanks!

Upvotes: 0

Views: 3016

Answers (3)

metarmask
metarmask

Reputation: 1857

Every time you set innerHTML the browser has to parse what you set it as. That only matters if you are setting large amounts of text. If you don't need insert HTML you can use textContent instead.

To display the divs of data from the chemical element divs you could use document.cloneNode to make a copy of the elements inside of the chemical element divs and append them to the corner:

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>

Upvotes: 1

AndrewL64
AndrewL64

Reputation: 16301

You can achieve that using only the CSS :hover selector like this:

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 with above codes: https://jsfiddle.net/AndrewL32/be2hqqwx/1/

Upvotes: 0

user5613057
user5613057

Reputation:

You can use the HTML-title Attribute.

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

Or if you want to solve this with JavaScript you can look up the

createElement() - Method

Upvotes: 1

Related Questions