页面底部的演示
因此,我有一个默认情况下不透明度为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方式处理更改,只添加一个类;)