CSS里鼠标点击div里的LI A时加上背景图片_IT百科

CSS里面没有点击事件，只能控制鼠标移入的时候显示！

小案例：

<!doctype html>

<html>

<head>

<title>CSS里鼠标点击div里的LI A时加上背景图片</title>

div:hover>a{background: url(img/5.jpg)}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

案例截图：为进入

案例截图：进入

你动态创建的代码，是把li和img都放到ul里，即类似这样：

.....

</ul>

这样的话，img就不受li的css约束了啊，当然就没阴影了。

应该把img放到li里，再把li放到ul里，即这样：

......

var li = document.createElement("li")

var img = document.createElement("img")

img.src = "images/"+(i+1)+".png"

li.appendChild(img)

ps.appendChild(li)

背景填充background-image:

他填充的位置包括padding的位置，因为padding是内框里面的部分。而定义的width 和 height 的大小是是加上可以输入html内容的大小。

border边框是最外边的在padding的外面，

例如：.divs{width:50pxheight:15pxpadding:20pxborder:1px solid red}

<div class="divs">这里面是实际宽度</div>

你会发现border框会随着padding有无而变化。

而背景background-image也会随着padding的有无而出现填充位置的变化。

希望可以帮到你。不明白可以继续问我。

给你插一个我画的图吧。

欢迎分享，转载请注明来源：内存溢出

CSS里鼠标点击div里的LI A时加上背景图片