如何用CSS或Javascript实现当拨号盘关闭时,左下角的图标变为向下的按钮,像这样的-
现在点击后任然是这样。
感谢!
如何用CSS或Javascript实现当拨号盘关闭时,左下角的图标变为向下的按钮,像这样的-
现在点击后任然是这样。
感谢!
纯使用css实现这样的效果,可以借助某些dom上的特定属性
可以看下http://callmenick.com/post/css-toggle-switch-examples 使用checkbox实现的switch效果
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box{
width:100px;
height:100px;
border:1px solid red;
position: relative;
overflow: hidden;
}
.A,.B{
position: absolute;
z-index: 1;
}
input{
display: block;
width: 100px;
height: 100px;
opacity:50;
position: absolute;
z-index: 10;
opacity:0;
}
.i_2{
display: none;
}
/*点击i_1 让A图片隐藏,显示B图片*/
.i_1:checked ~.box .A{
display: none;
}
/*点击i_1让i_2按钮出现(看不见)*/
.i_1:checked +.i_2{
display: block;
}
/*点击.i_2 让A显示*/
.i_2:checked ~.box .A{
display: block;
}
/*同时让.i_2隐藏,便于后面再次点击i_1*/
.i_2:checked{
display: none;
}
</style>
</head>
<body>
<input type="radio" name='v' class="i_1" />
<input type="radio" name='v' class="i_2" />
<div class="box" id="box">
<img class="B" src="B.jpg" />
<img class="A" src="A.jpg" />
</div>
</body>
</html>
经过测试 是成功的 利用的是input元素的:checked,纯css实现,不过有点麻烦,用js简单些
3 回答5.2k 阅读✓ 已解决
5 回答2k 阅读
2 回答2k 阅读✓ 已解决
1 回答3.1k 阅读✓ 已解决
3 回答2.5k 阅读
3 回答2.2k 阅读
2 回答1.1k 阅读✓ 已解决
采用tiscript实现如下: