如何在 CSS 中使用 if 语句，或使用 javascript 解决它？

Dylan 发表于 Dev

迪伦

页面底部的演示

所以我有一个默认情况下不透明度为 0 的 div，我们称之为 #myDiv。

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

#myDiv {
  opacity: 0;
}

#myDiv:hover {
  opacity: 1;
}

现在我<hr/>在默认情况下在 div 中有一个标签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 没有很多经验。

要在桌面上查看演示，请参阅：转到我的工作并将鼠标悬停在项目上

我怎样才能在移动设备上实现这一目标？

罗伯托·比塞洛

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

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

编辑：考虑到您还需要检查是否在视图中，在您的 js 中而不是将不透明度设置为 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 方式处理更改，只需添加一个类；)

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。