Question

所以，我现在正试图这样做：

 <table class ="tablez">
 <tr>
 <th>Table Title </th>
 </tr>
 <tr>
 <td>
 <a tabindex="0" class="clickable">Click Me!</a>
 <div id="showedClickable">
 <p>This is showed when Click Me! is clicked.</p> 
 </div><!--EO showedClickable -->
 </td>
 </tr>
 </table>

继承班级

  #showedClickable {
 position:absolute;
 display:none;
 width:auto;
 height:auto;
 }

单击时会发生什么。

 a.clickable:focus + #showedClickable {

 display:block;
 }

它可以在笔记本电脑上使用Chrome工作正常但是当我在手机（iPhone）上试用它时这不起作用....这里有什么问题？我该如何解决这个问题，解决这个问题？

感谢您的时间！

Answer 1

我遇到了这个问题。问题是iPhone不会根据CSS中的事件重绘兄弟姐妹。

尝试使用这样的元素嵌套并使用子选择器而不是兄弟选择器。它通常也更具语义性，因为您单击的项目通常是所显示内容的标题。

奇怪的是，iPad支持将鼠标悬停为点击事件，

<ul>
    <li><a href="">Click me</a>
        <ul>
            <li>This is showed when Click Me! is clicked.</li>
        </ul>
    </li>

li:hover ul {display: block;}

点击＆amp;显示 - 平板电脑/手机

1 个答案: