时间戳

首页 > 解决方案 > 将 :hover 替换为 onclick

html - 将 :hover 替换为 onclick

问题描述

我有一个手风琴滑块，可以扩展鼠标悬停在纯 CSS 上的图像：hover; 但是，我想在鼠标左键单击（或在触摸屏上触摸）图像时添加相同的效果，并保持与悬停时相同的“样式”或“状态”（展开）。在此先感谢编码新手！

<script>
		var acc = document.getElementsByClassName("null");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
	        
  });
}
	</script>
.accordion ul li div a p {
	position: absolute;
  top: 90%;
  font-size: 18px;
}

.accordion ul li:nth-child(1) { background-image: url("pic1.jpg"); }

.accordion ul li:nth-child(2) { background-image: url("pic2.jpg"); background-size: 223%;}

.accordion ul li:nth-child(2) img {width: 25%;}

.accordion ul:hover li { width: 8%; }

.active, .accordion ul:hover li:hover { width: 60%; }

.active, .accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0.1); }

.active, .accordion ul:hover li:hover a * {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
<div class="accordion">
  <ul>
    <li>
      <div> <a class="null" href="#">
        <h2>1</h2>
        <p>#</p>
        </a> </div>
    </li>
    <li>
      <div> <a class="null" href="#">
        <h2><img src="images..." alt=""/></h2>
        <p>#</p>
        </a> </div>
    </li>
   </ul>
</div>

标签： htmlcssaccordion

解决方案

我没有看到任何名为null. 您是否试图删除课程？如果是这样，您可以切换它。你有一个elsewith no if，这是无效的语法。

var acc = document.getElementsByClassName("null");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
  });
}

推荐阅读