Question

我在页脚中有一个社交图标按钮，我希望它在悬停时更改其背景颜色。我把它放在社交课堂上，在我的css中，我将它放在悬停上，它应该改变它的背景颜色。不工作。

This is HTML for footer:

<div class="footer">
        <div class="container" align = "center">
            <button class="btn btn-info btn-block"data-toggle="modal"       href="#tallModal6">Click here "</button>
        </div>
        <div class="container social" align = "center" style = "color:white">

            <img src="images/fb.png" height = "50px" width = "50px" >
            <img src="images/gplus.png" height = "50px" width = "50px" >
            <img src="images/linkedin.png"  height = "50px" width = "50px" >
            <img src="images/mail.png"  height = "50px" width = "50px">
        </div>
        <div class="container" align = "center">

        </div>
    </div>

这是我的CSS：

.social:hover {

    background-color = white;
    }

Answer 1

你的css有一些语法错误。这应该有效：

.social:hover {
  background-color: white;
}

错误是使用等于=符号而不是冒号:。

CSS语法

More info

Answer 2

background-color = white不是CSS中的东西。

应该是这样的：

.social:hover{background-color: white;}

Link 有关CSS语法的一些帮助。

Answer 3

您说您希望更改按钮的背景颜色，而不是.social div，因此您需要将CSS应用于该按钮。

http://jsfiddle.net/cqsq7bxd/

button:hover {
    background-color: blue;
}

如果你想要它用于.social div，你可以像这样应用它：

.social:hover {
background-color: white;
}

我在页脚中有社交图标的图像，我希望它在悬停时更改其背景颜色

3 个答案: