CODEWITHSUNDEEP
javascripthtmlcss
Danish Riaz
Danish Riaz

Reputation: 71

Hover on Clickable

Hello there I have a code the heading is clickable and then the paragraph is appear but what is when we go to the text it make to copy the text. but I want it to clickable like the mouse will change to hand or something. the code I listed below.

<!DOCTYPE html>
<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
  <style>
    .text,
    input {
      display: none;
    }
    
    .active+.text {
      display: block;
    }
  </style>
</head>

<body>
  <h2>
    <div>
      <p style="font-family: DINpro; font-size: 24px;">Project Services &#8595;</p>
      <div class="text" style="font-size: 18px; font-weight: 400; line-height: 24px; font-family: DIN pro;">Wanneer de gobo’s gereed zijn begeleiden we de installatie en stellen we de projectoren af. Alles voor het het best mogelijke resultaat.</div>
    </div>
  </h2>
  <script>
    var icons = document.getElementsByTagName('p');
    for (var p = 0; p < icons.length; p++) {
      icons[p].addEventListener('click', function() {
        this.classList.toggle('active');
      });
    }
  </script>
</body>

</html>

Upvotes: 3

Views: 3164

Answers (3)

Hiren Devganiya
Hiren Devganiya

Reputation: 359

You can use CSS like this

<style>
p{
    cursor: pointer;
    width: max-content;
}
p:hover{
    color:red;
}
</style>

Upvotes: 0

Aalexander
Aalexander

Reputation: 5004

To make the cursor to a hand on click you can update the logic inside your event listener

icons[p].addEventListener('click', function() {
            this.classList.toggle('active');
            this.style.cursor = "pointer";
            document.getElementsByClassName('text')[0].style.cursor = "pointer";
          });

Set the style.cursor propety of the elements of your choice to pointer

<!DOCTYPE html>
<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
  <style>
    .text,
    input {
      display: none;
    }
    
    .active+.text {
      display: block;
    }
  </style>
</head>

<body>
  <h2>
    <div>
      <p style="font-family: DINpro; font-size: 24px;">Project Services &#8595;</p>
      <div class="text" style="font-size: 18px; font-weight: 400; line-height: 24px; font-family: DIN pro;">Wanneer de gobo’s gereed zijn begeleiden we de installatie en stellen we de projectoren af. Alles voor het het best mogelijke resultaat.</div>
    </div>
  </h2>
  <script>
    var icons = document.getElementsByTagName('p');
    for (var p = 0; p < icons.length; p++) {
      icons[p].addEventListener('click', function() {
        this.classList.toggle('active');
        this.style.cursor = "pointer";
        document.getElementsByClassName('text')[0].style.cursor = "pointer";
      });
    }
  </script>
</body>

</html>

Upvotes: 0

Nghi Nguyen
Nghi Nguyen

Reputation: 950

I add one more class for your header text to control toggle effect. And add effect like clickable on it.

.clickable-header{

  cursor: pointer;
}

And the heading element with class "clickable-header"

<p class="clickable-header" >


<!DOCTYPE html>
<html>

<head>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
  <style>
    .text,
    input {
      display: none;
    }
    
    .active+.text {
      display: block;
    }
    
    .clickable-header{
    
      cursor: pointer;
    }
      
  </style>
</head>

<body>
  <h2>
    <div>
      <p class="clickable-header" style="font-family: DINpro; font-size: 24px;">Project Services &#8595;</p>
      <div class="text" style="font-size: 18px; font-weight: 400; line-height: 24px; font-family: DIN pro;">Wanneer de gobo’s gereed zijn begeleiden we de installatie en stellen we de projectoren af. Alles voor het het best mogelijke resultaat.</div>
    </div>
  </h2>
  <script>
    var icons = document.getElementsByTagName('p');
    for (var p = 0; p < icons.length; p++) {
      icons[p].addEventListener('click', function() {
        this.classList.toggle('active');
      });
    }
  </script>
</body>

</html>

Upvotes: 5

Related Questions