怎样用css实现div选中的效果

Posted 2023-05-06

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎样用css实现div选中的效果相关的知识，希望对你有一定的参考价值。

参考技术A 你想要一个什么样的选中效果？
以下是个红边框的样式
div:hoverborder:1px solid red; 参考技术B div:focus
里面写你想要的选中效果样式
参考技术C 不懂这儿的选中是鼠标点击还是覆盖或者是点击之后的效果,因此就都说一下:
1.被点击时的效果可以用div:active css

2.鼠标覆盖在上面的时候可以用div：hover css;

3.点击之后的效果，这个相对前2种有些麻烦，必须用到JS或者jquery，步骤如下：

a.先给div添加一个选中的样式比如oncss；

b.然后在js中$('div').click(function
$('div').toggleClass(' ','on');
)
这是jquery自带的一个方法，点击div切换2个class, 参考技术D div:hover本回答被提问者采纳第5个回答 2015-11-12 <div onmouseover="this.style.backgroundColor='#f4f4f4'" onmouseout="this.style.backgroundColor='#fff'">00000</div>

也可以用链接样式做
a
a:hover

css3 中怎样实现div的2d，3d旋转？

像w3c教室那样。网址是.w3school.com.cn/css3/css3_3dtransform.asp。前边是www。

那个页面有个展示效果，我想要实现那个的代码

新建一个HTML文件粘过去:
<p onclick="rotateDIV()" id="rotate1" class="animated_div" style="transform: rotate(360deg);">2D 旋转</p>
<p onclick="rotateYDIV()" id="rotatey1" class="animated_div" style="transform: rotateY(180deg);">3D 旋转</p>
<style>
p
margin: 12px 0 0 0;
line-height: 150%;

#rotate1, #rotatey1
border: 1px solid #000000;
background: red;
margin: 10px;
opacity: 0.7;

.animated_div
width: 60px;
height: 40px;
color: #ffffff;
position: relative;
font-weight: bold;
padding: 20px 10px 0px 10px;
float: left;
margin: 20px;
margin-right: 50px;
border: 1px solid #888888;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font: 12px Verdana, Arial, Helvetica, sans-serif;
line-height: normal;
text-align: center;
vertical-align: middle;

#rotate1,#rotatey1 border:1px solid #000000; background:red; margin:10px; opacity:0.7;
</style>
<script></script> 参考技术A <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<style type="text/css">
div
background: #000;
color: #fff;
width: 100px;
height: 100px;
margin: 50px;
display: inline-block;

/*请用谷歌浏览器预览效果, 鼠标划过方块看效果*/

/*2D旋转*/
.one:hover
-webkit-transition: all 0.5s ease-in-out;
-webkit-transform: rotate(360deg);
transition: all 0.8s ease-in-out;

/*3D旋转*/
.two:hover
-webkit-transform:rotateY(360deg);
transition: all 0.8s ease-in-out;

/*放大*/
.three:hover
-webkit-transform: scale(1.2);
transition: all 0.8s ease-in-out;

</style>
</head>

<body>
<div class="one">2D旋转</div>
<div class="two">3D旋转</div>
<div class="three">放大</div>
</body>
</html>本回答被提问者采纳参考技术B <style>
.div1, .div2
   width:80px;
   height:40px;
   text-align:center;
   line-height:40px;
   background-color:#f88;
   border:1px solid #666;
   margin:10px;
   transition:all 2s;

.div1:hover
   transform:rotate(180deg);

.div2:hover
   transform:rotateY(180deg);

</style>
<div class=div1>2D旋转</div>
<div class=div2>3D旋转</div>

参考技术C

html:

JS:

var x,y,n=0,ny=0,rotINT,rotYINT

function rotateDIV()

x=document.getElementById("rotate1")

clearInterval(rotINT)

rotINT=setInterval("startRotate()",10)

function rotateYDIV()

y=document.getElementById("rotatey1")

clearInterval(rotYINT)

rotYINT=setInterval("startYRotate()",10)

function startRotate()

n=n+1

x.style.transform="rotate(" + n + "deg)"

x.style.webkitTransform="rotate(" + n + "deg)"

x.style.OTransform="rotate(" + n + "deg)"

x.style.MozTransform="rotate(" + n + "deg)"

if (n==180 || n==360)

clearInterval(rotINT)

if (n==360)n=0

function startYRotate()

ny=ny+1

y.style.transform="rotateY(" + ny + "deg)"

y.style.webkitTransform="rotateY(" + ny + "deg)"

y.style.OTransform="rotateY(" + ny + "deg)"

y.style.MozTransform="rotateY(" + ny + "deg)"

if (ny==180 || ny>=360)

clearInterval(rotYINT)

if (ny>=360)ny=0

参考技术D 上面不是写的很清楚么
div

transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 和 Chrome */-moz-transform: rotateY(130deg); /* Firefox */

以上是关于怎样用css实现div选中的效果的主要内容，如果未能解决你的问题，请参考以下文章

div背景颜色怎样渐变 css实现div层背景颜色渐变代码

怎样用纯css做出轮播图效果

有十个div，怎样实现选中其中一个，改变其背景色，另外九个不变，当选中另一个时又改变另一个的背景色

js在opera下怎样获取可编辑div中的鼠标光标和选中文本

css3 中怎样实现div的2d，3d旋转？

怎样用javascript实现select标签选中后，重新载入页面后保存之前选中的选项与显示效果？