[英]Hover on Clickable
你好,我有一个代码,标题是可点击的,然后出现了段落,但是当我们 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 ↓:</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>
我为您的 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 ↓:</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>
要使 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 ↓:</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>
您可以像这样使用CSS
<style>
p{
cursor: pointer;
width: max-content;
}
p:hover{
color:red;
}
</style>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.