我的页面上充斥着产品缩略图，“悬停”会变大（以便于阅读）。如果访问者喜欢他们所看到的内容，则可以“单击”以转到产品页面。
但是，在移动设备（即触摸屏）上没有悬停，因此他们（必须）单击-会启动“放大”过渡效果，但还会启动链接，然后立即将其转到产品页面“ 他们是否喜欢”;）
我能想到的最好的方法是，在移动设备上，指向产品页面的链接被设置为“无效”，直到用户首次单击（这将启动放大过渡效果）。然后（如果他们单击放大）进入产品页面。
可以用CSS完成吗？我们已经在使用jquery，那么如何做到最好？有更好的解决方案吗？非常感谢。
.style1 {background-color: #800080;}
.F1 {
float:left;
width:120px;
height:123px;
background:#f5dc90;
padding:0;
margin:0;
text-align:center;
font-size:12px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
position:relative;
}
.caption {
color:green;
display:block;
width:100%;
height:21px;
position:absolute;
z-index:0;
border:1px solid transparent; /* borders hidden */ border-bottom:0;
-webkit-transition: background-color 1s; /* For Safari 3.1 to 6.0 */
transition: background-color 1s;
}
.caption a:link {
cursor:pointer;
text-decoration:none; }
.I1 {
position:absolute;
left:0;top:20px; /* moved down height of caption minus border */
width:120px;
height:auto; /* 107px */
opacity:1.0;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s; border-top:2px dashed transarent;
}
.hoverArea {
position: absolute;
z-index:100;
top:14px;
left:0;
width: 90px;
min-height: 90px;
opacity: 0.0;
background:none;
} /* add color& opacity for testing */
.F1 > .hoverArea:hover ~ .I1 {
position:absolute;
z-index:1;
clip: rect(0,293px,256px,6px);
width:300px;
height:auto; /* clip = top, right, bottom, left (for 120px wide) - all from top-left */
left:-6px;
overflow:visible;
border-top:2px red solid;
}
.F1 > .caption:hover ~ .I1 { /* same as above */
position:absolute;
z-index:1;
clip: rect(0,293px,256px,6px);
width:300px;
height:auto; /* clip = top, right, bottom, left (for 120px wide) - all from top-left */
left:-6px;
overflow:visible;
border-top:2px red solid;
}
.F1 > .hoverArea:hover ~ .caption {
color:red;
z-index:101;
text-decoration:underline;
cursor:pointer;
background:yellow;
border-radius: 8px 8px 0 0;
border-color:red;
font-size:larger;
}
.F1 > .caption:hover { /* same as above */
color:red;
z-index:101;
background:yellow;
border-radius: 8px 8px 0 0;
border-color:red; font-size:larger;
cursor:pointer;
text-decoration:underline; /* <<< plus */
} <body>
<p>TESTING</p>
<div id="wrapper" style="margin-right: -220px; margin-top: -24px;">
<div class="F1">
<a class="hoverArea" href="../products/dgf1" title="Opens in New Window" target="ProdWin"></a>
<a class="caption" href="../products/dgf1" title="Opens in New Window" target="ProdWin">Product1</a>
<img class="I1" src="https://via.placeholder.com/300x265.png" title="Product1" />
</div>
<div class="F1">
<a class="hoverArea" href="../products/dgf2" title="Opens in New Window" target="ProdWin"></a>
<a class="caption" href="../products/dgf2" title="Opens in New Window" target="ProdWin">Product2</a>
<img class="I1" src="https://via.placeholder.com/300x265.png" title="Product2" />
</div>
<div class="F1">
<a class="hoverArea" href="../products/dgf3" title="Opens in New Window" target="ProdWin"></a>
<a class="caption" href="../products/dgf3" title="Opens in New Window" target="ProdWin">Product3</a>
<img class="I1" src="https://via.placeholder.com/300x265.png" title="Product2" />
</div>
</div> <!-- close wrapper -->让您的移动用户双击链接是不正确的做法。您可以将转换与页面滚动相关联，以便div出现时就在其上徘徊。
最好的想法可能是使用媒体查询完全禁用悬停效果。