css+div html 鼠标滑过div里的内容变样式?

2024-11-01 12:34:51
推荐回答(5个)
回答(1):

1、先在找个文件夹创建文件index.html。

2、然后用能编辑文本文件的软件打开index.html,index.html的初始内容如图。

3、接着编写两个样式作为鼠标移动时div修改的样式。

4、然后编写js代码修改div的样式。

5、编辑完index.html后保存,在浏览器中打开index.html。效果如图。鼠标移入移出div时,div的样式改变。

6、如果想div能改变多个样式。可如图修改index.html文件。

回答(2):

例子:

原始内容是这样的结构:


    

    查房
    

系统。。。。。。。。。。


    了解更多

如果是这样的布局(开始样式已经写好了)打比方直接上hover:
css:
.con:hover .img{background:url(images/1-1.jpg)}这里是移动上去的背景颜色,如果你代码中是直接插入的图片,那么需要用到js去改变图片
.con:hover span{color:#fff}查房字体变白色
.con:hover p{color:#fff}段落文字为白色
.con:hover a{color:#fff}链接字体变白色

回答(3):

这个很简单,首先,要布局清楚,这儿除了那张图片,其他都是可以用纯样式实现的,那么这里就可以把这张图片用background-image来实现;
样式大致如下:
div{
background-color:背景色;

background:url(第一张图片);
color:字体颜色

}
div:hover{
background-color:鼠标覆盖的背景色;

background:url(鼠标覆盖的图片);
color:鼠标覆盖的字体颜色
}
这是粗略的思想,如果还是不懂,把你的图片给我。分分钟写一个出来

回答(4):

这个用js/jq来做最好了,当鼠标滑动div时,触发事件,也就是mouseover事件,然后在事件内部编写要替换的内容,然后直接调用html();替换内容就可以了,当鼠标滑出时,再次替换会原来的内容就可以了。
以上仅代表个人意见。

回答(5):

给你说个思路吧,具体的样式自己去写
你要的效果使用用“:hover”可以很方便的实现,首先,假如说有一个样式如下
.test{
background-color: blur;

}
这个是正常样式,并且你有一个div使用了这个样式

demo

你现在希望鼠标经过这个div时改变它的底色(样式),那么很简单,再增加一个样式:
.test:hover{
background-color: red;

}
不需要对你的div再作其他修改即可实现。
这里的 .test:hover 这个样式,就是告诉浏览器,鼠标经过时,将.test的样式改成新指定的样式

相关问答
最新问答