css3中设置的img：hover不起作用
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3中设置的img：hover不起作用相关的知识，希望对你有一定的参考价值。
想实现照片墙的效果，鼠标移动到图片上时图片放大等，不知道代码哪写错了，求指教
html代码：
<meta http-equiv="Content-Type" content="text/html" charset="gb2312" />
<html>
<head>
<title>照片墙</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="container">
<img class="pic pic1" src="1.jpg">
<img class="pic pic2" src="2.jpg">
......
<img class="pic pic19" src="9.jpg">
<img class="pic pic20" src="10.jpg">
</div>
</body>
</html>
css代码：
*
margin: 0;
padding: 0;
body
background-color: #eeeeee;
.container
width: 1000px;
height: 830px;
margin: 20px auto;
position: relative;
.pic
width: 150px;
.container img: hover
box-shadow: 15px 15px 14px rgba(50,50,50,0.4);
transform: rotate(0deg) scale(1.2);
-webkit-transform: rotate(0deg) scale(1.2);
-moz-transform: rotate(0deg) scale(1.2);
z-index: 2;
.container img
padding: 3px;
background: white;
border: 1px solid #ddd;
box-shadow: 5px 5px 4px rgba(50,50,50,0.4);
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
position: absolute;
z-index: 1;
.pic1
left: 100px;
top: 0;
transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
.pic2
left: 250px;
top: 50px;
transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
.pic19
left: 200px;
bottom: 150px;
transform: rotate(5deg);
-webkit-transform: rotate(5deg);
.pic20
left: 620px;
bottom: 100px;
transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
我也用的chrome啊！怎么没效果？
追答可是，我的有效果！带旋转的，放大效果，有阴影！你的html文件是html5的么？
追问是html5啊！会不会跟chrome的版本有关，我的经常提示版本太旧，但是重新安装又失败
追答不清楚，但是谷歌都支持html5和css3
追问终于知道为什么了，hover前面多了个空格，哎，晕死，不管怎样谢谢你啦
本回答被提问者和网友采纳css3：动画后悬停不起作用
【中文标题】css3：动画后悬停不起作用【英文标题】：css3 :hover wont work after animation 【发布时间】：2014-10-05 06:50:41 【问题描述】：我有一个 DIV，它在 :hover 时将 bgcolor 更改为蓝色。 按钮单击添加了将 bgcolor 设置为绿色的类。但是现在 :hover 不起作用（bgcolor 不会变成蓝色）。
为什么？
http://jsfiddle.net/EstSiim/me7t055c/
HTML：
<div class="box"></div>
<button class="animate-btn">Animate</button>
CSS：
.box
background-color: red;
width: 200px;
height: 200px;
.box:hover
background-color: blue;
.trigger-bg-change
-webkit-animation: bg-change 1s ease 0 1 forwards;
animation: bg-change 1s ease 0 1 forwards;
@-webkit-keyframes bg-change
0% background-color:red;
100% background-color:green;
@-keyframes bg-change
0% background-color:red;
100% background-color:green;
JS：
$(function()
$('.animate-btn').on('click', function()
console.log('hey');
$('.box').addClass('trigger-bg-change');
);
);
【问题讨论】：
【参考方案1】：DEMO
您可以对 .trigger-bg-change 使用以下 CSS 规则：
.trigger-bg-change
background-color: green;
-webkit-animation: bg-change 1s ease 0 1 none;
animation: bg-change 1s ease 0 1 none;
通过将 animation-fill-mode 属性从 forwards 更改为 none，动画在执行后不会将样式应用于元素，因此 .box:hover 的规则不会被覆盖。
【讨论】：
【参考方案2】：DEMO 1 (With JavaScript - See code below)DEMO 2 (Without JavaScript - See code below)
JavaScript 解决方案：
<b>HTML</b>
<div class="box-init"></div>
<button class="run-btn">Run Animation</button>
<b>CSS</b>
.box-init, .box-post
width: 200px;
height: 200px;
margin-bottom:10px;
.box-init
background-color: red;
.box-post
background-color: green;
.box-post:hover
background-color:blue;
.box-transition
transition-property: background-color;
transition-duration: 0.5s;
transition-timing-function: ease;
transition-delay: 0s;
.box-animation
/*Animation properties*/
animation-name: bg-change;
animation-duration: 0.5s; /* <-- ANIMATION DURATION IS 0.5 SECONDS!! */
animation-iteration-count: initial;
animation-direction: initial;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
@keyframes bg-change
100% background-color:green;
<b>JavaScript</b>
const runBtn = document.querySelector('.run-btn');
const box = document.querySelector('.box-init');
runBtn.addEventListener('click', ()=>
box.classList.add("box-animation"); // animation duration is 0.5 seconds
setTimeout(() => // so after 0.6 seconds we will remove the animation
box.classList.add("box-post");
box.classList.remove("box-init");
box.classList.remove("box-animation");
box.classList.add("box-transition");
, 600); //0.6 seconds
);
替代解决方案（不使用 JavaScript）：
<b>HTML</b>
<div class="box"></div>
<b>CSS</b>
.box
background-color: red;
width: 200px;
height: 200px;
margin-bottom:10px;
/*Animation properties*/
animation-name: bg-change;
animation-duration: 0.5s;
animation-iteration-count: initial;
animation-direction: initial;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
@keyframes bg-change
0% background-color:red;
100% background-color:green;
.box:hover
/*Animation properties*/
animation-name: hover-animation;
animation-duration: 0.5s;
animation-iteration-count: initial;
animation-direction: initial;
animation-timing-function: ease-in;
animation-fill-mode: forwards;
@keyframes hover-animation
0% background-color: green;
100% background-color:blue;
【讨论】：
以上是关于css3中设置的img：hover不起作用的主要内容，如果未能解决你的问题，请参考以下文章
iOS 8：在界面构建器中设置的自定义标签栏项目的选定图像不起作用