如何在触摸设备上单独悬停和点击或移除点击

时间：2021-05-05 11:47:55

标签： javascript html css

我有一个网页，里面有我们产品的小图片。 访问者可以将鼠标悬停在图片上，每张图片都会放大两倍大小（因此可以更轻松地查看/阅读）。

如果访问者感兴趣 - 他们可以点击 - 并将他们带到单个产品页面。

以上在普通屏幕上工作正常，但在触摸设备上（即不能“悬停”） - 当访问者触摸图像时 - 它需要它们直接进入产品页面（他们可能不想去的地方） - 这会导致用户界面烦人且效率低下。

如何在触摸设备上进行更改：

  • 第一次触摸 - 展开图像
  • 第二次触摸** - 打开产品 页面。

有两个元素可以链接到产品页面：

  • “标题”
  • '图像

**在触摸设备上，可以删除“图像”链接（假设我们可以找到相关技术；），因为当图像被展开时，“标题”作为链接突出显示。

在调查中，我读到 css 无法更改/删除 href。
javascript可以吗？如果是这样，最好将其作为“大规模更改”完成（即当页面通过触摸设备打开时在所有 html 上）？

页面是[这里][1]

代码是：

.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;
          -moz-transition: background-color 1s;
         -o-transition: background-color 1s;
    transition: background-color 1s;   /* on hover-OUT speed */                                     
    }
.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 0.2s;
          -moz-transition: width 0.2s;
         -o-transition: width 0.2s;
    transition: width 0.2s;   /* on hover-OUT speed */                  
    border-top: 2px dashed transparent;  /* for testing */
    }
.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;
           -webkit-transition: width 2s;
          -moz-transition: width 2s;
         -o-transition: width 2s;
    transition: width 2s;  
    }
.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;
           -webkit-transition: width 2s;
          -moz-transition: width 2s;
         -o-transition: width 2s;
    transition: width 2s; 
}
.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 */
}

/************  additional css for Supply theme below:    ************  */
@media (hover: none) {       /* if device is touch & can't hover  */
    /*   still  no solution to separate hover & click for touch devices ;)  */
}
.grid-item {left:0 !important;}
img.auto, .grid-item img, .grid-item iframe { max-width: 200% !important; }
/* msg to ask user to rotate their device */
#rotateMsg {        
    display: none;
}
@media screen and (max-width: 576px) {
    #rotateMsg {
        position: fixed; z-index:999;
        background-color: rgba(145, 75, 51,0.9);
        border:1px black solid;
        display: block;
        width: 200px; left: calc(50vw - (/* width */200px / 2)); 
        top:20%;
        padding:5px;
        border-radius:5px;
        text-align:center; font-weight:bold; color:white;
        box-shadow: 5px 5px 3px rgba(10,20,30,0.3); 
    }
}
/* end of rotate msg /*
/* end of additional styles ********************************* */
--></style>
<div id="wrapper" style="margin-right: -220px; margin-top: -24px;"><!-- #######################################################  -->
<div id="rotateMsg">Sorry - Too much detail to fit on a small screen. Please try rotating your device - perhaps</div>
<!-- ########################################################## -->
<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">DGF 1</a> <img class="I1" src="//cdn.shopify.com/s/files/1/0175/2200/products/dgf1.jpg?v=1345760446" title="Thomas Morris" /></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">DGF 2</a> <img class="I1" src="//cdn.shopify.com/s/files/1/0175/2200/products/dgf2.jpg?v=1345797337" title="New Orleans Owls - The Owls' Hoot" /></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">DGF 3</a> <img class="I1" src="//cdn.shopify.com/s/files/1/0175/2200/products/dgf03.jpg?v=1345797531" title="    Johnny Dodds" /></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">DGF 4</a> <img class="I1" src="//cdn.shopify.com/s/files/1/0175/2200/products/dgf04.jpg?v=1345797743" title="Tony Parenti" /></div>
<div class="F1"><a class="hoverArea" href="../products/dgf5" title="Opens in New Window" target="ProdWin"></a> <a class="caption" href="../products/dgf5" title="Opens in New Window" target="ProdWin">DGF 5</a> <img class="I1" src="//cdn.shopify.com/s/files/1/0175/2200/products/dgf05.jpg?v=1345797920" title="    Sizzling the Blues : New Orleans 1927-29" /></div>
<div class="F1"><a class="hoverArea" href="../products/dgf6" title="Opens in New Window" target="ProdWin"></a> <a class="caption" href="../products/dgf6" title="Opens in New Window" target="ProdWin">DGF 6</a> <img class="I1" src="//cdn.shopify.com/s/files/1/0175/2200/products/dgf06.jpg?v=1345798454" title="    Dixieland Jug Blowers" /></div>
<div class="F1"><a class="hoverArea" href="../products/dgf7" title="Opens in New Window" target="ProdWin"></a> <a class="caption" href="../products/dgf7" title="Opens in New Window" target="ProdWin">DGF 7</a> <img class="I1" src="//cdn.shopify.com/s/files/1/0175/2200/products/dgf07.jpg?v=1345798694" title="    That's My Stuff : Chicago 1929-30" /></div>
<div class="F1"><a class="hoverArea" href="../products/dgf8" title="Opens in New Window" target="ProdWin"></a> <a class="caption" href="../products/dgf8" title="Opens in New Window" target="ProdWin">DGF 8</a> <img class="I1" src="//cdn.shopify.com/s/files/1/0175/2200/products/dgf08.jpg?v=1345798987" title="    Hot Notes New York Volume 1" /></div>
<div class="F1"><a class="hoverArea" href="../products/dgf9" title="Opens in New Window" target="ProdWin"></a> <a class="caption" href="../products/dgf9" title="Opens in New Window" target="ProdWin">DGF 9</a> <img class="I1" src="//cdn.shopify.com/s/files/1/0175/2200/products/dgf09.jpg?v=1345799007" title="    Chicago 1929-30 : Get Easy Blues" /></div>

抱歉，代码格式不正确，但主机平台“Shopify”有自己的想法！ [1]：https://www.frog-records.co.uk/pages/frog-records-catalogue-chronologically

0 个答案:

没有答案
相关问题
最新问题