將hover function改為點擊小屏

Question

我有一些文本內容出現在圖像的 hover 上。 但是在手機版中，我需要改為點擊打開function。

<div class="program prog-image" style="background-image: url(https://imagevars.gulfnews.com/2019/07/23/Timberwolf_16c1de35555_base.jpg)">
      <div class="more-details"> 
        <ul>
          <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, voluptates.</li>
          <li>Lorem ipsum dolor sit amet.</li>
        </ul>
      </div>
    </div>

<style>
    .program{
        height: 400px;
        width: 700px;
        position: relative;
    }
    .more-details{
        opacity: 0;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    ul{
        list-style: none;
    }
    .program:hover .more-details{
        opacity: 1;
    }
</style>

我的意思是我希望它看起來像帶箭頭的手風琴。 任何人都可以幫忙嗎？

Answer 1

使用:focus 。 確保帶有.program class 的元素支持:focus偽 class。 您可能需要使用<a>標簽而不是<div> 。 不確定<div>是否有:focus state。

    .program:hover .more-details,
    .program:focus .more-details {
        opacity: 1;
    }

或者你可以使用js

  var elements = document.querySelectorAll(".program");

  elements.forEach((el) => {
    el.addEventListener('click', function(event) {
      el.classList.toggle('open')
    })
  })

並稍微修改你styles

    .program:hover .more-details,
    .program.open .more-details {
        opacity: 1;
    }

Answer 2

我認為你應該使用 JavaScript。 這是我的解決方案：

 const temp = document.querySelector(".prog-image"); const details = document.querySelector(".more-details"); const showText = () =>{ console.log("W"); details.classList.toggle("detail"); } temp.addEventListener("click",showText); temp.addEventListener("mouseover",showText); temp.addEventListener("mouseout",showText);

 <div class="program prog-image" style="background-image: url(https://imagevars.gulfnews.com/2019/07/23/Timberwolf_16c1de35555_base.jpg)"> <div class="more-details"> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, voluptates.</li> <li>Lorem ipsum dolor sit amet.</li> </ul> </div> </div>

  .detail{
        opacity: 1;
    }

Answer 3

請按照上面的代碼..

HTML

<div class="program">
 <div class="prog-image" style="background-image: url(https://imagevars.gulfnews.com/2019/07/23/Timberwolf_16c1de35555_base.jpg)">
  <div class="more-details">
   <ul>
     <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, voluptates.</li>
     <li>Lorem ipsum dolor sit amet.</li>
   </ul>
  </div>
 </div>
</div>

css

.program{
    height: 400px;
    width: 700px;
    position: relative;
}
.prog-image {
    background-size: cover;
    height: 100%;
}
ul{
    list-style: none;
}
.more-details {
  opacity: 0;
  position: absolute;
  left: 0px;
  right: 0px;
  top: 50%;
}
@media only screen and (min-width: 768px) {
  .more-details{
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .program:hover .more-details{
      opacity: 1;
  }
}
@media only screen and (max-width: 767px) {
    .program{
      width: 100%;
    }
    .prog-image.content-show .more-details {
      opacity: 1;
    }
}

JQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript">
      jQuery(document).ready(function() {
        jQuery('.prog-image').click(function() {
          jQuery(this).toggleClass("content-show");
        });
      });
</script>

Answer 4

將 jquery 添加到您的代碼中：

$(".program").click(function () {
    $(".more-details").css("opacity", 1);
    });