Question

很抱歉提出此问题之前可能已经得到解答。不幸的是，我不理解某些回复的复杂性。

当鼠标悬停在桌面上时，我有一些代码在桌面上运行得非常漂亮 - 但只是坐在移动设备上（我明白因为它们没有鼠标悬停功能）。

如何使用hover和onclick使这些代码正常工作？

这是我的代码。非常赞赏

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Original Hover Effects with CSS3</title>
    <meta charset="UTF-8">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
    <style>


    .view {
      width: 300px;
      height: 200px;
      margin: 10px;
      float: left;
      border: 10px solid #fff;
      overflow: hidden;
      position: relative;
      text-align: center;
      -webkit-box-shadow: 1px 1px 2px #e6e6e6;
      -moz-box-shadow: 1px 1px 2px #e6e6e6;
      box-shadow: 1px 1px 2px #e6e6e6;
      cursor: default;
      background: #fff url(../images/bgimg.jpg) no-repeat center center;
    }
    .view .mask,.view .content {
      width: 300px;
      height: 200px;
      position: absolute;
      overflow: hidden;
      top: 0;
      left: 0;
    }
    .view img {
      display: block;
      position: relative;
    }
    .view h2 {
      text-transform: uppercase;
      color: #fff;
      text-align: center;
      position: relative;
      font-size: 17px;
      padding: 10px;
      background: rgba(0, 0, 0, 0.8);
      margin: 20px 0 0 0;
    }
    .view p {
      font-family: Georgia, serif;
      font-style: italic;
      font-size: 12px;
      position: relative;
      color: #fff;
      padding: 10px 20px 20px;
      text-align: center;
    }
    .view a.info {
      display: inline-block;
      text-decoration: none;
      padding: 7px 14px;
      background: #000;
      color: #fff;
      text-transform: uppercase;
      -webkit-box-shadow: 0 0 1px #000;
      -moz-box-shadow: 0 0 1px #000;
      box-shadow: 0 0 1px #000;
    }
    .view a.info: hover {
      -webkit-box-shadow: 0 0 5px #000;
      -moz-box-shadow: 0 0 5px #000;
      box-shadow: 0 0 5px #000;
    }



    .view-tenth img {
      -webkit-transform: scaleY(1);
      -moz-transform: scaleY(1);
      -o-transform: scaleY(1);
      -ms-transform: scaleY(1);
      transform: scaleY(1);
      -webkit-transition: all 0.7s ease-in-out;
      -moz-transition: all 0.7s ease-in-out;
      -o-transition: all 0.7s ease-in-out;
      -ms-transition: all 0.7s ease-in-out;
      transition: all 0.7s ease-in-out;
    }
    .view-tenth .mask {
      background-color: rgba(255, 231, 179, 0.3);
      -webkit-transition: all 0.5s linear;
      -moz-transition: all 0.5s linear;
      -o-transition: all 0.5s linear;
      -ms-transition: all 0.5s linear;
      transition: all 0.5s linear;
      -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      opacity: 0;
    }
    .view-tenth h2 {
      border-bottom: 1px solid rgba(0, 0, 0, 0.3);
      background: transparent;
      margin: 20px 40px 0px 40px;
      -webkit-transform: scale(0);
      -moz-transform: scale(0);
      -o-transform: scale(0);
      -ms-transform: scale(0);
      transform: scale(0);
      color: #333;
      -webkit-transition: all 0.5s linear;
      -moz-transition: all 0.5s linear;
      -o-transition: all 0.5s linear;
      -ms-transition: all 0.5s linear;
      transition: all 0.5s linear;
      -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      opacity: 0;
    }
    .view-tenth p {
      color: #333;
      -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      opacity: 0;
      -webkit-transform: scale(0);
      -moz-transform: scale(0);
      -o-transform: scale(0);
      -ms-transform: scale(0);
      transform: scale(0);
      -webkit-transition: all 0.5s linear;
      -moz-transition: all 0.5s linear;
      -o-transition: all 0.5s linear;
      -ms-transition: all 0.5s linear;
      transition: all 0.5s linear;
    }
    .view-tenth a.info {
      -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      opacity: 0;
      -webkit-transform: scale(0);
      -moz-transform: scale(0);
      -o-transform: scale(0);
      -ms-transform: scale(0);
      transform: scale(0);
      -webkit-transition: all 0.5s linear;
      -moz-transition: all 0.5s linear;
      -o-transition: all 0.5s linear;
      -ms-transition: all 0.5s linear;
      transition: all 0.5s linear;
    }
    .view-tenth:hover img {
      -webkit-transform: scale(10);
      -moz-transform: scale(10);
      -o-transform: scale(10);
      -ms-transform: scale(10);
      transform: scale(10);
      -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
      filter: alpha(opacity=0);
      opacity: 0;
    }
    .view-tenth:hover .mask {
      -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
      filter: alpha(opacity=100);
      opacity: 1;
    }
    .view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -o-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
      -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
      filter: alpha(opacity=100);
      opacity: 1;
    }


    </style>
</head>
<body>
    <div class="container">
        <!-- TENTH EXAMPLE -->
        <div class="view view-tenth">
            <img src="images/quokka-jumping.jpg">
            <div class="mask">
                <h2>Quokka</h2>
                <p>Best known for its cute Mona-Lisa smile and the love of selfies the quokka is always happy. The little quokka is hard to resist!</p><a class="info" href="http://panique.com.au/trishansoz/animals/quokka.html">Read More</a>
            </div>
        </div>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript">
    </script>
</body>
</html>

Answer 1

.view a.info:hover,
.view a.info:focus,
.view a.info:active {
  -webkit-box-shadow: 0 0 5px #000;
  -moz-box-shadow: 0 0 5px #000;
  box-shadow: 0 0 5px #000;
}

Answer 2

您可以使用touchstart和touchend事件模拟在移动设备上悬停。

this answer会有所帮助

如何使悬停也在onclick上工作？

2 个答案: