Star test

Show text on svg hover

by willystyle

HTML

<body class="site">
  <header>
    <h1>Try hovering on the star</h1>
  </header>
  <figure class="theimage">
    <!-- The star shape svg  -->
    <svg id="star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 343.6 326.8">
      <g>
        <polygon class="green" id="green-star" points="119.3,107.4 171.8,1.1 224.2,107.4 172.2,181.2 	" />
        <g>
          <path d="M171.8,2.2l51.9,105.2l-51.5,72.9l-52.3-72.9L171.8,2.2 M171.8,0l-53.1,107.5l53.5,74.6l52.6-74.6L171.8,0L171.8,0z" />
        </g>
      </g>
      <g>
        <polygon class="yellow" id="yellow-star" points="173,181.8 225,108.1 342.5,125.2 257.5,208.1 	" />
        <path d="M225.2,108.6l116.2,16.9l-84.1,82l-83.5-26L225.2,108.6 M224.8,107.5l-52.6,74.6l85.5,26.6v-0.1l85.9-83.7L224.8,107.5
		L224.8,107.5L224.8,107.5z" />
      </g>
      <g>
        <polygon class="orange" id="orange-star" points="172.7,270.9 172.7,182.7 257.3,209.1 277.3,325.9 	" />
        <path d="M173.2,183.4l83.6,26L276.6,325l-103.4-54.4V183.4 M172.2,182v89.2L278,326.8l-20.3-118.1L172.2,182L172.2,182z" />
      </g>
      <g>
        <polygon class="red" id="red-star" points="86.2,209.3 171.7,182.7 171.7,270.4 66.2,325.9 	" />
        <path d="M171.2,183.4v86.7L66.9,324.9l19.8-115.2L171.2,183.4 M172.2,182l-86.4,26.9L65.6,326.7l106.2-55.8l0.4,0.2V182L172.2,182z
		" />
      </g>
      <g>
        <polygon class="blue" id="blue-star" points="1,125.1 118.6,108.1 171.4,181.8 86.3,208.3 	" />
        <g>
          <path d="M118.3,108.6l52.3,72.9l-84.1,26.2L2.2,125.5L118.3,108.6 M118.7,107.5L118.7,107.5L0,124.8l85.9,83.8l-0.1,0.4l86.4-26.9
			L118.7,107.5L118.7,107.5z" />
        </g>
      </g>
    </svg>
  </figure>

  <!-- The text that shows on hover -->
  <div id="textarea">
    <div id="green-text" class="text">
      <h2>Look, there is a text!</h2>
      <p>This paragraph is only shown when you hover on the green area.</p>
    </div>
    <div id="yellow-text" class="text">
      <h2>Look, there is a text!</h2>
      <p>This...

CSS

body {
  padding: 20px;
  font-family: Helvetica;
}

h1 {
  text-transform: uppercase;
  font-weight: bold;
}

.theimage {
  width: 30%;
}

/* Colors of the star */
.green {
  fill: #47D6A3;
}

.green:hover {
  fill: #32a67c;
}

.yellow {
  fill: #FFED6E;
}

.yellow:hover {
  fill: #c7b84e;
}

.orange {
  fill: #FFAE6C;
}

.orange:hover {
  fill: #bd7c48;
}

.red {
  fill: #FF6666;
}

.red:hover {
  fill: #d14f4f;
}

.blue {
  fill: #3585BC;
}

.blue:hover {
  fill: #22608a;
}

/* The text area under the star */
#green-text h2 {
  color: #32a67c;
}

#yellow-text h2 {
  color: #c7b84e;
}

#orange-text h2 {
  color: #bd7c48;
}

#red-text h2 {
  color: #d14f4f;
}

#blue-text h2 {
  color: #22608a;
}

.text {
  display: none;
}

JavaScript

let colors = ["green", "yellow", "orange", "red", "blue"];
for (let color of colors) {
	let area = document.querySelector(`#${color}-star`);
	let text = document.querySelector(`#${color}-text`);
  area.addEventListener("mouseover", function() { showText(text);});
	area.addEventListener("mouseout", function() { hideText(text);});  
}

function showText(text) {
  text.style.display = "block";
}

function hideText(text) {
  text.style.display = "none";
}