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

演示在页面底部

我有一个div，默认情况下不透明度为0，我们称它为#myDiv

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

#myDiv {
  opacity: 0;
}

#myDiv:hover {
  opacity: 1;
}

现在我在div中有一个

标记，默认宽度为

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%;
}

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%;
}

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

现在我想能够在手机上触发
效果，我想也许可以在css中使用if语句，但我认为这是不可能的。我的想法是：

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

但是css不能做到这一点，Javascript可以做到这一点吗？或者这里最好的解决方案是什么

我对JavaScript没有太多经验

要在桌面上查看演示，请参阅：

如何在手机上实现这一点？
不，您不能在纯CSS中使用if语句。对于基本检测，您可以：

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

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

或者，您可以通过javascript实现这一点。您必须查找一个检查您是否是移动用户的代码段，如果是，则->将类
isMobile
添加到您的
。现在您可以执行以下操作：

.isMobile hr {
    width: 100%;
}

根据您添加的关于“仅在视图中时”的注释，您可以使用javascript检测元素是否在视图中（这必须通过javascript完成）。有很多片段可以找到。您可以使用相同的技巧，添加一个类，如
isInView


在这两种情况下，我都让CSS做实际的更改，JS只是一个辅助。这是因为CSS做样式，而不是JS。通过这种方式，您可以让css知道它必须做什么。
不，您不能在普通css中使用if语句。对于基本检测，您可以：

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

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

或者，您可以通过javascript实现这一点。您必须查找一个检查您是否是移动用户的代码段，如果是，则->将类
isMobile
添加到您的
。现在您可以执行以下操作：

.isMobile hr {
    width: 100%;
}

根据您添加的关于“仅在视图中时”的注释，您可以使用javascript检测元素是否在视图中（这必须通过javascript完成）。有很多片段可以找到。您可以使用相同的技巧，添加一个类，如
isInView


在这两种情况下，我都让CSS做实际的更改，JS只是一个辅助。这是因为CSS做样式，而不是JS。通过这种方式，您可以让css知道它必须做什么。
尝试使用媒体查询，您还可以删除js以获得不透明度；）

编辑：考虑到您还需要检查是否在视图中，在您的js中，不要将不透明度设置为1，而是向#myDiv添加一个类，并按如下方式更改css：

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

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

编辑：考虑到您还需要检查是否在视图中，在您的js中，不要将不透明度设置为1，而是向#myDiv添加一个类，并按如下方式更改css：

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

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方式处理更改，只需添加一个类；）
 您可以使用jQuery。如果这不起作用，请发表评论，以便我可以帮助你。。我不是在台式自动取款机后面

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

您可以使用jQuery。如果这不起作用，请发表评论，以便我可以帮助你。。我不是在台式自动取款机后面

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

使用
scss
如何？您需要查看媒体查询（）这样您就有了一个JS脚本来检查#myDiv是否处于查看状态并更改不透明度，为什么这个脚本不能同时触发动画？使用
scss
如何？您需要查看媒体查询（）那么你有一个JS脚本来检查#myDiv是否处于查看状态并更改不透明度，为什么这个脚本不能同时触发动画？但是只有当#myDiv在视图中时才需要添加宽度，那么如何实现呢？扩展了我的答案，请参见行上方的最后一段，但是只有当#myDiv在视图中时才需要添加宽度，那么这将如何实现呢？扩展了我的答案，请参阅行上方的最后一段js也用于检测div是否在屏幕上实际可见。如果你看一下link和inspect元素，你可以看到不透明度只有在你滚动到它时才会改变$（caption1）.classList.add（“project mobile”）但是这会引发错误，“无法读取未定义的属性'add'，而在顶部我说：var caption1=document.getElementById（'caption1'），它也存在于我的Htmlar中。您使用jquery吗？在这种情况下，您只需执行一些操作，如
$（'#caption1'）.addClass（'project-mobile'）如果您使用的是vanilla js，您需要执行类似于
caption1.className+=“project mobile”的操作附言建议：如果你采用一个框架，使用它，不要把香草和框架混在一起，这会使代码混乱。。。因此，例如，如果您使用jquery，则不要执行
document.querySelector（'#blabla'）
或
document.getElementById（'blablabla'）
简单调用
$（'#blabla'）
）是的，我现在设法修好了。这确实是jquery。我现在是这样做的：
（isScrolledIntoView（tile1））$（“#caption1”）.addClass（“project mobile”）：$（“#caption1”）.removeClass（“project mobile”）它终于起作用了！谢谢你的帮助！js还用于检测div在屏幕上是否实际可见。如果你看一下link和inspect元素，你可以看到不透明度只有在你滚动到它时才会改变