CSS Image Hover出乎意料地无法正常工作？

Question

我正在尝试创建一种悬停效果，当鼠标悬停时，它会将图像的颜色更改为蓝色。我已经为图像创建了一个类，并在我的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>

Answer 1

如果您不想影响其他元素并更改图片周围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/

Answer 2

选择器为img.guitarLogo:hover

但是为图像设置背景颜色只会影响图像的可见部分 （如果有的话），而color只会影响文字（并且没有＆＃ 39; t any），所以你可能会看到没有效果，即使它有效。

Answer 3

你的CSS：

.guitarLogo img:hover {
    color: yellow;
    background-color: blue;     
}

不正确，因为.guitarLogo已经定位<img>元素 - 不需要img：hover。

此外，这不会起作用，因为你无法将z-index设置为背景 - 只有元素才有可能。

执行所需操作的方法是注册：将鼠标悬停在父容器上并使用伪元素：在/ /之后作为前景，您可以获得所需的效果。

Answer 4

在你的css中试试这段代码

.guitarLogo:hover {
  background: blue;
}

Answer 5

看起来你的目标是错误的元素。仅当图片为background-color:blue时才会显示transparent，否则大多数情况下图片将与任何背景颜色重叠以使其可见。

您应该做的是定位容器元素，如下所示。

.border_section:hover
{
color: yellow;
background-color: blue;

}

<强> DEMO

如果您有带透明胶片的图像，或者如果您只是为了设置background-color的{​​{1}}，那么您可能应该按照以下规则编写规则。

img

Answer 6

您还可以将背景颜色叠加到图像

.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>