Question

我有一些文本内容显示在图像的悬停上。但是在移动版本中，我需要将其更改为单击以打开功能。

<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类的元素支持:focus伪类。您可能需要使用<a>标签而不是<div>。不确定<div>是否具有:focus状态。

    .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')
    })
  })

对样式进行一些修改

    .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);
    });

更改悬停功能以在小屏幕上单击

4 个答案: