论坛 › 知识问答 › html - 在 IOS 7 中悬停时链接中断

菜鸟教程小白 发表于 2022-12-12 17:06:54

html - 在 IOS 7 中悬停时链接中断

                                            <p><p>我有一系列 div，其中包含图像、链接和 span。该问题似乎只发生在 IOS 7.0.4 (iPhone 5S) 上。这些元素上有一个悬停状态，在每个设备上都可以正常工作，除了这个链接根本不起作用的设备。非常感谢任何想法或建议。</p>

<p>HTML:</p>

<pre><code>&lt;div class=&#34;project&#34;&gt;
&lt;img width=&#34;300&#34; height=&#34;180&#34; src=&#34;my-image.jpg&#34; class=&#34;attachment-full&#34; alt=&#34;Thumb&#34;&gt;
&lt;a href=&#34;/misc/link&#34;&gt;
   &lt;span class=&#34;project-alt&#34;&gt;
    &lt;span class=&#34;project-title&#34;&gt;My Title&lt;/span&gt;
   &lt;/span&gt;
&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.project {
/*margin: 25px 25px 30px;*/
margin: 20px 7px 30px;
width: 300px; height: 180px;
display: inline-block;
position: relative;
border: solid 1px #016e96;
box-shadow: 0 0 15px 3px #9e9e9e;
}

#portfolio .project img {
position: relative;
max-width: 300px;
max-height: 180px;
width: 100%;
height: auto;
}

.project a {
text-align: center;
display: block;
height: 100%;
position: absolute;
width: 100%;
top: 0;
left: 0;
}

.project a:hover .project-alt {display: block;}

.project-alt {
   background-color: rgba(0, 174, 239, 0.7);
   margin: 25px 25px 30px;
   width: 100%;
   height: 100%;
   display:none;
   z-index: 5;
   position: absolute;
   left: -25px;
   top: -25px;
   vertical-align: middle;
   }

.project-title {
   text-decoration: none;
   font-size: 20px;
   font-family: &#39;Titillium Web&#39;, sans-serif;
   color: #ffffff;
   font-style: italic;
   font-weight: 700;
   background-color: rgba(2,166,229, 0.8);
   width: 230px;
   display: inline-block;
   vertical-align: middle;
   line-height: 1.2em;
   padding: 10px;
   }
</code></pre>

<p>因此，无论出于何种原因，当单击运行 IOS 7.0.4 的 iPhone 5S 时，这些链接都不起作用。任何想法如何处理 CSS :hover 状态？</p></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>您不能在 IOS 上悬停显示的内容上显示:无。使用不透明度或使用绝对定位隐藏它，然后将其悬停在它应该去的地方。也不要使用可见性。</p>

<p>这里是完整的解释:<a href="http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/" rel="noreferrer noopener nofollow">http://www.nczonline.net/blog/2012/07/05/ios-has-a-hover-problem/</a> </p>

<p>另外，检查 z-index。</p>

<p>这在此处记录:<a href="https://developer.apple.com/library/IOs/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW7" rel="noreferrer noopener nofollow">https://developer.apple.com/library/IOs/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW7</a> </p></p>
                                   
                                                <p style="font-size: 20px;">关于html - 在 IOS 7 中悬停时链接中断，我们在Stack Overflow上找到一个类似的问题：
                                                        <a href="https://stackoverflow.com/questions/20434987/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/20434987/
                                                        </a>
                                                </p>
                                       

查看完整版本: html - 在 IOS 7 中悬停时链接中断