Заменить: зависание при нажатии - PullRequest
Новая
       8

Заменить: зависание при нажатии

0 голосов
/ 06 марта 2019

У меня есть ползунок аккордеона, который расширяет изображение, где мышь наводится с помощью чистого 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>

1 Ответ

0 голосов
/ 06 марта 2019

Я не вижу ни одного класса с именем null.Вы пытались удалить класс?Если это так, вы можете просто переключить его.И у вас был else без if, который является недопустимым синтаксисом. 

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

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