Question

我创建了一个列表ul，并在每个元素中放置了图像，事实是，当我将鼠标悬停在桌面上的这些图像上时，会在我之前隐藏的图像上显示一层，在该层中，有关显示图像。当我不将光标放在图像上时，该层再次被隐藏。问题在于，在移动版本中，悬停效果不能像在台式机中那样起作用，但是您必须在图像上单击两次，才能在此层显示信息。

我在javascript中有此代码，因此在移动设备上触摸每张图片时，它都会向我显示以下信息：

$(".item").on('click touchend', function(e) {

    var mediaquery = window.matchMedia("(max-width: 767px)");

    if (mediaquery.matches) 
    {
        // mediaquery yes
        $(".menu-desc").css("left", "0px");
    } 
    else 
    {
        // mediaquery no
    }

});//click event

这可能适用于我需要的问题，是当它检测到其中一个框内的单击时，该信息会同时显示在所有框内，这不是所希望的，如果触摸的是仅在该框中的一个框中显示信息。我无法通过ID来引用这些框，因为我无法控制创建多少个框，因为这些框是通过我创建的内容管理面板添加的。可能有用户想要的盒子很多，所以我不知道该怎么做，这样我才能准确地分别检测每个盒子。

我该如何实现？这个想法是要替换移动版本中的悬停。

HTML代码：

<ul id="menu-pricing" class="menu-price">
<?php 
for ($j=0; $j <count($categories); $j++) 
{ 
?>
    <li class="item <?php echo $categories[$j][1];?>">
        <a href="#">
            <img src="admin/<?php echo $categories[$j][4];?>" class="img-responsive" alt="Referenzen Works" >
            <div class="menu-desc text-center">
                <span>
                    <h3><?php echo $categories[$j][5];?></h3>
                    <?php 
                    if ($categories[$j][6] !== "empty") 
                    {
                    ?>
                        <h4><?php echo $categories[$j][6]; ?></h4>
                    <?php 
                    }
                    ?>
                </span>
            </div>
        </a>
    </li>
<?php 
} //for
?>
</ul>

没有php的html

<ul id="menu-pricing" class="menu-price">

    <li class="item here-go place-a-class-created-by-the-user-in-Adminpanel">
        <a href="#">
            <img src="admin/public/image.png" class="img-responsive" alt="Referenzen Works" >
            <div class="menu-desc text-center">
                <span>
                    <h3>Title of box</h3>

                    <h4>Subtitle of box (optionl)</h4>
                </span>
            </div>
        </a>
    </li>

</ul>

框中的信息来自数据库。

CSS代码：

/** menu-pricing list **/
#images_li_options_container
{
  margin-left: 0px !important;
  margin-right: 0px !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

#images_li_options_container .row
{
  padding-left: 0px !important;
  padding-right: 0px !important;
}

#menu-pricing {
  display: block;
    width: 100%;
    padding: 50px 0px 25px 0px;
    margin-bottom: 0;
  text-align: left;
}

#menu-pricing .item {
  background-color: white;
  /*box-shadow: 0px 2px 5px white; #948E8E;*/
  display: none;
  /*opacity: 0;*/
  vertical-align: top;
  margin-bottom: 0px;
  margin-right: 0px;
  color: #fff;
  text-align: center;
  width: 33.1%;
  height: 220px;
  -moz-box-sizing: border-box;
}

#menu-pricing .item a {
  display: inline-block;
  max-width: 100%;
  max-height: 220px;
  text-decoration: none;
  background: #fff;
  text-align: center;

}

@media (min-width: 991px) {
  #menu-pricing .item:nth-child(7),
  #menu-pricing .item:nth-child(8),
  #menu-pricing .item:nth-child(9) {
    margin-bottom: 0px;
  }
}

@media (min-width: 1200px)
{
#images_li_options_container.container {
    width: 100% !important;
}

}

/*  --========================    for  hover direction  =============================-- */

.menu-price li a,
.menu-price li a img {
  display: block;
  position: relative;
}
.menu-price li a {
  overflow: hidden;
  color: #fff;
}
.menu-price li a .menu-desc {
  position: absolute;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.7); /*rgba(29, 136, 197, 0.4); blue */
  width: 100%;
  height: 100%;
  top: 0px;
  left: -100%;

  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;

}

.menu-price li a .menu-desc span h3 {
  font-size: 30px;
  margin-bottom: 15px;
}

.menu-price li a:hover .menu-desc {
  left: 0px;
}

#menu-pricing .item img {
  max-width: 100%;
  height: 220px;
  text-align: center;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
}

#menu-pricing .item:hover img 
{
 -webkit-transform: scale(1.8); 
    -moz-transform: scale(1.8);
    -o-transform: scale(1.8);
    transform: scale(1.8);
}

.menu-price li a:hover .menu-desc span {
  display: block;
  /*color: rgba(255,255,255,0.9);*/
  font-size: 23px;
  padding: 22% 20px;
  line-height: 23px;
  color: black !important;
  font-weight: bold !important;
}

Answer 1

尝试添加:active。尽管由于移动设备上的点击速度非常快，所以具有悬停效果是毫无意义的。我总是在PC上为Web保留悬停效果。移动与:active配合良好。

替代方法是通过javascript添加一个使用关键帧触发动画的类，并在动画播放完后使用超时删除该类。

示例： https://jsfiddle.net/votnd2zy/

如何在移动设备上实现悬停效果？

1 个答案: