我正在尝试创建一种悬停效果，当鼠标悬停时，它会将图像的颜色更改为蓝色。我已经为图像创建了一个类，并在我的CSS中设置了它的样式，但它仍然无效。我也尝试过更改z索引，但无济于事。
@import url(http://fonts.googleapis.com/css?family=Black+Ops+One:400,700); /*--- Header --*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700); /*--- Navigation --*/
*
{
margin: 0;
border: 0;
padding: 0;
}
body
{
background-image: url('../Images/background.png');
background-repeat: repeat-x;
}
.clearfix
{
clear:both;
}
#wrapper
{
margin: 0 auto;
max-width: 1120px;
overflow: auto;
border: 1px solid black;
}
#main_header
{
width: 100%;
font-family: 'Black Ops One', sans-serif;
background-color: black;
border: 1px solid black;
color: white;
}
#main_header h1
{
float: left;
font-size: 380%;
margin: -10% 0 0 2%;
}
#callout
{
margin: 50px 20px 0 0;
}
#callout h2{
text-align: right;
color: white;
}
#callout p{
text-align: right;
padding: 0%;
color: grey;
font-size: 20px;
margin-bottom: 3px;
}
#nav_menu
{
width: 100%;
height: 10%;
background-color: white;
}
#nav_menu li
{
display: inline-block;
margin: 20px 20px 20px 63px;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: bold;
}
#nav_menu li a
{
text-decoration: none;
color: black;
}
#nav_menu li a:hover
{
color: grey;
}
#content_area
{
width: 100%;
margin: 10px;
}
.sub-menu
{
position: absolute;
background-color: white;
list-style-type: none;
width: 5px;
display: none;
z-index: 60;
border-radius: 15px;
}
#nav_menu .sub-menu li a
{
color: black;
}
#nav_menu li:hover .sub-menu
{
display: block;
}
#nav_menu li .sub-menu
{
width: 16.5%;
}
#nav_menu li .sub-menu li
{
display: block;
margin-left: 20px;
}
.sub-menu li:hover
{
color: green;
background-color: yellow;
}
/*--- Start Image Slider --*/
.slider{
max-width: 1100px;
box-shadow: 0px 0px 0px 0 rgba(0, 0, 0, 0.07);
}
.slider1 img{
width: 100%;
margin: 0 auto;
}
.slider .bx-wrapper .bx-controls-direction a{
outline: 0 none;
position: absolute;
text-indent: -9999px;
top: 40%;
height: 71px;
width: 40px;
transition: all 0.7s;
}
.slider .bx-wrapper:hover .bx-controls-direction a{
}
.slider .bx-wrapper .bx-prev{
background: url("../Images/arrow_left.png") no-repeat 7px 9px;
left: 0px;
}
.slider .bx-wrapper .bx-prev:hover{
background: url("../Images/arrow_left.png") no-repeat 8px 15px;
}
.slider .bx-wrapper .bx-next{
background: url("../Images/arrow_right.png") no-repeat 10px 12px;
right: 0px;
}
.slider .bx-wrapper .bx-next:hover{
background: url("../Images/arrow_right.png") no-repeat 10px 17px;
}
/*--- End Image Slider --*/
.one-third img{
text-align: center;
max-width: 100%;
height: auto;
opacity: 0.9;
}
.border_section p{
font-family: 'Lato', sans-serif;
padding: 2%;
color: white;
text-align: justify;
}
.border_section h3
{
font-family: 'Open Sans', sans-serif;
text-align: center;
color: white;
text-transform: uppercase;
letter-spacing: 1%;
}
.border_section
{
border: 1px solid black;
background-color: black;
}
.one-third {
width: 27.35%;
float: left;
margin: 2% 0 3% 4%;
text-align: center;
background-color: white;
}
.guitarLogo img:hover
{
color: yellow;
background-color: blue;
}
footer{
font-family: 'Open Sans', sans-serif;
font-weight: bold;
text-align: center;
width: 100%;
height: 6%;
background-color: black;
overflow: auto;
}
footer p
{
margin-top: 1%;
color: white;
}
<div class="border_section">
<img class="guitarLogo" src="../Images/Guitar Brands/ibanezLogo.jpg" runat="server"/>
</div>
</section>
<section class="one-third">
<div class="border_section">
<img class="guitarLogo" src="../Images/Guitar Brands/fenderLogo.jpg" runat="server"/>
</div>
</section>
<section class="one-third">
<div class="border_section">
<img class="guitarLogo" src="../Images/Guitar Brands/gibsonLogo.jpg" runat="server"/>
</div>
</section>
<section class="one-third">
<div class="border_section">
<img class="guitarLogo" src="../Images/Guitar Brands/prsLogo.jpg" runat="server"/>
</div>
</section>
<section class="one-third">
<div class="border_section">
<img class="guitarLogo" src="../Images/Guitar Brands/ernieballLogo.jpg" runat="server"/>
</div>
</section>
<section class="one-third">
<div class="border_section">
<img class="guitarLogo" src="../Images/Guitar Brands/espLogo.jpg" runat="server"/>
</div>
</section>
答案 0 :(得分：2)
如果您不想影响其他元素并更改图片周围div元素的背景颜色，请创建新类myHover并向其添加现有CSS，例如：
<强> HTML ：
<div class="border_section myHover">
<img class="guitarLogo" src="../Images/Guitar Brands/fenderLogo.jpg" runat="server" />
</div>
<强> CSS ：
.myHover:hover {
color: yellow;
background-color: blue;
}
JSFiddle示例：https://jsfiddle.net/59drat5e/4/
答案 1 :(得分：1)
选择器为img.guitarLogo:hover
但是为图像设置背景颜色只会影响图像的可见部分 （如果有的话），而color只会影响文字（并且没有＆＃ 39; t any），所以你可能会看到没有效果，即使它有效。
答案 2 :(得分：0)
你的CSS：
.guitarLogo img:hover {
color: yellow;
background-color: blue;
}
不正确，因为.guitarLogo已经定位<img>元素 - 不需要img：hover。
此外，这不会起作用，因为你无法将z-index设置为背景 - 只有元素才有可能。
执行所需操作的方法是注册：将鼠标悬停在父容器上并使用伪元素：在/ /之后作为前景，您可以获得所需的效果。
答案 3 :(得分：0)
在你的css中试试这段代码
.guitarLogo:hover {
background: blue;
}
答案 4 :(得分：0)
看起来你的目标是错误的元素。仅当图片为background-color:blue时才会显示transparent，否则大多数情况下图片将与任何背景颜色重叠以使其可见。
您应该做的是定位容器元素，如下所示。
.border_section:hover
{
color: yellow;
background-color: blue;
}
<强> DEMO
如果您有带透明胶片的图像，或者如果您只是为了设置background-color的{{1}}，那么您可能应该按照以下规则编写规则。
img答案 5 :(得分：0)
您还可以将背景颜色叠加到图像
.overlay {
position:relative;
width:400px;
height:auto;
}
.overlay img {
width:100%;
vertical-align:top;
}
.overlay:after {
content:'';
position:absolute;
width:100%;
height:100%;
top:0; left:0;
background:red;
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.overlay:hover:after {
opacity:1;
}<div class="overlay">
<img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="" />
</div>