Question

我正在创建一个CSS插件，但最近遇到了一些问题，让我们在移动设备上触发：悬停状态。我已经读过:focus应该提供类似的行为以及另外几个技巧，例如设置cursor: pointer但是到目前为止这些都没有对我的方案有所帮助。我希望尽可能避免使用Javascript / jQuery，因为我希望这是一个纯CSS解决方案。

这是我到目前为止所做的：

<div class="parent">
    <div class="child bg-one">
        <a href="#">Los Angeles</a>
    </div>
</div>

    .parent {
    width: 45%;
    margin: 20px;
    height: 300px;
    border: 1px solid blue;
    overflow: hidden;
    position: relative;
    float: left;
    display: inline-block;
    cursor: pointer;
}

.child {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

/* Several different images */
.bg-one {background-image: url(https://media.timeout.com/images/101602611/image.jpg);}


a {
    display: none;
    font-size: 35px;
    color: #ffffff !important;
    font-family: sans-serif;
    text-align: center;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 50px;
    cursor: pointer;
    /*text-decoration: none;*/
}

.parent:hover .child, .parent:focus .child {
    -ms-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

.parent:hover .child:before, .parent:focus .child:before {
    display: block;
}

.parent:hover a, .parent:focus a {
    display: block;
}

.child:before {
    content: "";
    display: none;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(52,73,94,0.75);
}

https://jsfiddle.net/r67gxp61/

Answer 1

使用tabindex作为焦点，移动中没有悬停

<div class="parent" tabindex="0">
    <div class="child bg-one">
        <a href="#">Los Angeles</a>
    </div>
</div>

https://jsfiddle.net/7qjkofnf/

CSS - ：未触发的移动设备上的悬停状态：焦点

1 个答案: