CSS：焦点不能在iOS中工作

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个包含图像的框。在悬停/焦点上，我想要一个颜色叠加层和标题淡入其中。除了iOS设备外，它几乎适用于所有浏览器和设备。CSS：焦点不能在iOS中工作

我正在使用：hover和：focus伪类来适应各种设备，但它似乎没有帮助iOS。鼠标悬停时没有任何反应。

这是我的代码，我也有一个全功能fiddle。

* {  
    padding: 0;  
    margin: 0;  
}  
.my_image {  
    float: left;  
    width: 50%;  
    margin: 0;  
    padding: 0;  
    position: relative;  
}  
.my_image p {  
    position: absolute;  
    color: #fff;  
    display: block;  
    padding: 0;  
    margin: 0;  
    opacity: 0;  
    top: 50%;  
    left: 50%;  
    transform: translate(-50%, -50%);  
    -ms-transform: translate(-50%, -50%);  
    /* IE 9 */  
    -webkit-transform: translate(-50%, -50%);  
    /* Safari and Chrome */  
    -webkit-transition: opacity .25s ease;  
    -moz-transition: opacity .25s ease;  
}  
.overlay {  
    top: 0;  
    position: absolute;  
    width: 100%;  
    height: 100%;  
    background: rgba(121, 87, 164, .80);  
    text-align: center;  
    opacity: 0;  
    -webkit-transition: opacity .25s ease;  
    -moz-transition: opacity .25s ease;  
}  
.my_image:hover .overlay,  
.my_image:hover p,  
.my_image:focus .overlay,  
.my_image:focus p {  
    opacity: 1;  
    visibility: visible;  
}

<div class="my_image">  
    <img src="https://unsplash.imgix.net/photo-1428976365951-b70e0fa5c551?fit=crop&fm=jpg&h=225&q=75&w=350" />  
    <div class="overlay"></div>  
    <p>Overlay Caption</p>  
</div>

有一些办法可以让没有JS这项工作？我在页面上使用jQuery，所以我不完全反对，我只是不认为这是必要的。

回答：

post Sergey Denisov shared中的解决方案起作用。您只需添加ontouchstart=""只是body元素，它神奇的作品，像这样：

<body ontouchstart=""> 
... 
</body>

这就是它！无法告诉你这是如何或为什么会起作用，但它确实如此。

以上是 CSS：焦点不能在iOS中工作 的全部内容， 来源链接： utcz.com/qa/262739.html

回到顶部