Hover on Clickable

Question

你好，我有一個代碼，標題是可點擊的，然后出現了段落，但是當我們 go 到它復制文本的文本時會發生什么。 但我希望它可以點擊，就像鼠標會變成手或其他東西一樣。 我在下面列出的代碼。

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

Answer 1

我為您的 header 文本再添加一個 class 以控制切換效果。 並添加可點擊效果。

.clickable-header{

  cursor: pointer;
}

以及帶有 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>

Answer 2

要使 cursor 成為手點擊，您可以更新事件偵聽器中的邏輯

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

將您選擇的元素的style.cursor屬性設置為指針

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

Answer 3

您可以像這樣使用CSS

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

Hover on Clickable

問題描述

3 個解決方案

解決方案1
3 已采納 2021-02-25 08:03:33

解決方案2
0 2021-02-25 07:59:47

解決方案3
0 2021-02-25 08:10:10

Hover on Clickable

問題描述

3 個解決方案

解決方案1 3 已采納 2021-02-25 08:03:33

解決方案2 0 2021-02-25 07:59:47

解決方案3 0 2021-02-25 08:10:10

解決方案1
3 已采納 2021-02-25 08:03:33

解決方案2
0 2021-02-25 07:59:47

解決方案3
0 2021-02-25 08:10:10