Question

我的翻转链接适用于具有悬停伪类的桌面。（在此查看http://www.rtmf.org.uk/ret-pri-trns.html）

我试图添加一个点击事件＆＃39;使用jQuery，因此它适用于平板电脑/移动设备。点击即可触发罚款，但再次点击后它不会切换回原始状态。

这是我的html和css。（css仅包含用于测试的-webkit前缀）

<body>
    <div class="retirement">
        <p>RTMF provides a no-cost Right to Manage service for retired leaseholders.</p>
        <p><a href="rtm-services-retirement.php">Read More</a>
        </p> <i class="fa fa-angle-up fa-2x"></i>

         <h2>Right to Manage for Retirement Blocks</h2>

        <img src="images/block-links/ret-image.jpg" width="380" height="253" alt="" />
        <img src="images/block-links/ret-image-blur.jpg" width="380" height="253" alt="" />
        <div class="green_mask"></div>
        <div class="opacity_mask"></div>
    </div>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        $('.retirement').on('click', function() {
            $(this).toggleClass('clicked');
        });
    </script>
</body>

.retirement {
    height: 253px;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 380px;
}
.retirement a {
    color: rgba(27,252,10,.65);
    opacity: 0;
    position: relative;
    text-decoration: none;
}
p, h2, i {
    font-family: "aktiv-grotesk-std-n2", "aktiv-grotesk-std",sans-serif;
    font-style: normal;
    font-weight: 200;
    position: relative;
    z-index: 5;
}
p, h2 {
    color: #fff;
    padding: 0 15px;
}
.retirement p {
    font-size: 1.8em;
    opacity: 0;
    text-align: center;
    top: 0;
    webkit-transform: translateY(253px);
    webkit-transition: all .2s ease-in;
}
a:hover {
    color: rgba(27,252,10,1);
}
.retirement i {
    color: #fff;
    margin: 0;
    text-align: center;
    top: -24px;
    webkit-transition: all .2s ease-in .2s;
}
.retirement h2 {
    font-size: 1.2em;
    margin: 0;
    text-align: center;
    top: -31px;
    webkit-transition: all .2s ease-in .4s;
}
.green_mask {
    background-color: rgb(8, 109, 3);
    height: 253px;
    left: 0px;
    position: absolute;
    top: 190px;
    webkit-transition: all .3s ease-in-out;
    width: 380px;
    z-index: 3;
}
.opacity_mask {
    background-color: rgb(12, 61, 9);
    height: 253px;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 190px;
    transition: all .2s ease-in-out;
    webkit-transition: all .2s ease-in-out;
    width: 380px;
    z-index: 4;
}
img[src="images/block-links/ret-image.jpg"] {
    left: 0px;
    position: absolute;
    top: 0px;
    z-index: 1;
}
img[src="images/block-links/ret-image-blur.jpg"] {
    left: 0px;
    opacity: 0;
    position: absolute;
    top: 0px;
    webkit-transition: all .2s ease-in .1s;
    z-index: 2;
}
.retirement:hover .green_mask,
.retirement.clicked .green_mask {
    opacity: 0;
    webkit-transform: translateY(-190px);
}
.retirement:hover .opacity_mask,
.retirement.clicked .opacity_mask {
    opacity: .65;
    webkit-transform: translateY(-190px);
}
.retirement:hover i,
.retirement:hover h2,
.retirement.clicked i,
.retirement.clicked h2 {
    opacity: 0;
    webkit-transform: translateY(-190px);
}
.retirement:hover p,
.retirement.clicked p {
    opacity: 1;
    webkit-transform: translateY(20px);
    webkit-transition: all .2s ease-in .3s;
}
.retirement:hover a,
.retirement.clicked a {
    opacity: 1;
}
.retirement:hover img[src="images/block-links/ret-image-blur.jpg"],
.retirement.clicked {
    opacity: 1;
}

有谁能看到我在这里出错的地方？

将onClick触发器应用于平板电脑/移动设备的转换

0 个答案: