javascript - 悬停在可点击
问题描述
您好,我有一个代码,标题是可点击的,然后出现了段落,但是当我们转到它复制文本的文本时会发生什么。但我希望它可以点击,就像鼠标会变成手或其他东西一样。我在下面列出的代码。
<!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>
解决方案
我为您的标题文本添加了一个类来控制切换效果。并添加可点击效果。
.clickable-header{
cursor: pointer;
}
以及带有“可点击标题”类的标题元素
<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>
推荐阅读
- python - 为什么我的进度条会打印,完成,然后打印并再次完成?
- sql - 红移无法识别的节点类型 407
- android - 在 EditText 视图中使用 BACKSPACE 或 SHIFT 按钮时应用程序关闭
- python - 为什么我的代码中出现字符串浮动错误?
- django - Django office365
- python-3.x - 在 scikit learn 管道之间传递参数
- python - Flask - 如何重用 URL 参数替换功能?
- c# - 如何从 sql 查询结果中解析字符串 json 并映射它
- javascript - Javascript 在 Chrome 中打开 Excel
- python - 在python3中使用flask上传多个文本文件