页面底部的演示


因此,我有一个默认情况下不透明度为0的div,我们将其称为#myDiv。

当用户将鼠标悬停在#myDiv上时,不透明度更改为1。

#myDiv {
  opacity: 0;
}

#myDiv:hover {
  opacity: 1;
}


现在,我在div中有一个<hr/>标记,默认情况下是width: 0;,例如:

hr {
  width: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}


用户将#myDiv悬停后,它将转换为宽度为100%,如下所示:

#myDiv:hover hr {
  width: 100%;
}


现在,我在该网站上还有一个脚本可以检查移动用户,因为这些用户不会触发悬停效果。因此它将检查div是否在屏幕上可见并将不透明度设置为1。

现在,我希望能够在移动设备上触发<hr/>效果,我认为也许可以在CSS中使用if语句,但我认为这是不可能的。我想到的是这样的:

if (#myDiv.opacity == 1) {
  hr {
    width: 100%;
  }
}


但这不能使用CSS完成,使用Javascript可以实现吗,或者什么是最佳解决方案?

我没有太多的JavaScript经验。

要在桌面上观看演示,请参阅:
Go to My Work and hover over project

如何在移动设备上实现这一目标?

最佳答案

尝试使用媒体查询,您也可以删除不透明度的js;)

@media screen and (max-width:767px){
  #myDiv {
    opacity: 1;
  }
  #myDiv hr {
    width: 100%;
  }
}


编辑:考虑到您还需要检查是否在视图中,在您的js中,而不是将opacity设置为1,将类添加到#myDiv并像这样更改CSS:

hr {
  width: 0;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

#myDiv {
  opacity: 0;
}

#myDiv:hover, #myDiv.mobile {
  opacity: 1;
}

#myDiv:hover hr, #myDiv.mobile hr {
  width: 100%;
}


这样,您将以与桌面相同的CSS方式处理更改,只添加一个类;)

09-10 10:32
查看更多