Question

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

第一张为原始图片，第二张为效果图
里面内容： 最上面那个是个图片<img>
补充：图片改为

最好有代码!！！！ 有点急 ！！





Answer 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文件。

Answer 2

例子：

原始内容是这样的结构：

<div class="con">
    <div class="img" style="background:url(imges/1.jpg)"></div>
    <span>查房</span>
    <p>系统。。。。。。。。。。</p>
    <a href="">了解更多</a>
</div>
如果是这样的布局（开始样式已经写好了）打比方直接上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}链接字体变白色

追问

我的图片是插入的 ？js 怎么改？

追答

先给图片标签赋个ID如
然后在JS里写document.getElementById("img").src=图片路径就可以了

追问

不在function里面写？

还是直接这样

document.getElementById("img").src=

追答

如果再html里面写就是你那样，如果是在js文件里面写，直接就写我那样的，写了document就不需要function了

追问

document.getElementById("img").src=".../images/1.jpg";

这样写图片路径有错吗？大神

追答

不知道，具体看你的图片在你当前要用的页面的什么位置，如果再同级目录下不需要前面的.../如果其他位置就需要用相对路径，你可以去看下图片的引用路径相关资料，我这里也不好说，不知道你的图片位置再什么地方

追问

我图片在 网站文件夹下的images文件夹中 ，网页在html文件夹中

追答

那你试试吧，反正相对路径就那么几种：
./images
../images
.../images
/images
images
../../images

追问

还是不好使

Answer 3

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

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

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

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

Answer 4

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

Answer 5

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

}
这个是正常样式，并且你有一个div使用了这个样式<div class="test">demo</div>，
你现在希望鼠标经过这个div时改变它的底色（样式），那么很简单，再增加一个样式：
.test:hover{
background-color: red;

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

追问

图片怎么变啊？

追答

图片可以用背景图的方式，样式里面： background: url(图片名称) no-report center center;