Question

在页面底部进行演示

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

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

#myDiv {
  opacity: 0;
}

#myDiv:hover {
  opacity: 1;
}

现在我在div中有一个<hr/>标签默认为width: 0;，例如：{/ p>

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

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

Answer 1

不，你不能在纯CSS中使用if语句。您可以use a mediaquery进行基本检测：

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

767像素比iPad少一个。您可以将其更改为您喜欢的设置。

或者，您可以通过javascript执行此操作。您必须查找一个片段，检查您是否是移动用户，如果是 - >＆gt;将班级isMobile添加到<body />。现在你可以这样做：

.isMobile hr {
    width: 100%;
}

根据您添加的关于＆＃39;仅在视图中的评论，您可以使用javascript来检测该元素是否在视图中（这必须使用javascript完成）。有很多片段可供参考。您可以使用相同的技巧，并添加类似isInView的类。

在这两种情况下我都让CSS做实际的改变，JS只是一个助手。这是因为CSS确实造型，而不是JS。这样你就让css知道它必须做什么。

Answer 2

尝试使用媒体查询，您也可以删除不透明度的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方式处理更改，只添加一个类;）

Answer 3

您可以使用jQuery。如果这不起作用，那么我可以帮助你..我不是桌面atm的背后

if ($('.test').css('opacity') === '1') {
    $("hr").css("width", "100%");
}

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

3 个答案: