2
Ich versuche, einen Hover-Effekt zu erstellen, der die Farbe des Bildes in blau ändert, wenn die Maus darüber schwebt. Ich habe bereits eine Klasse für die Bilder erstellt und gestylt in meinem CSS, aber es funktioniert immer noch nicht. Ich habe auch versucht, Z-Indizes zu ändern, aber ohne Erfolg.CSS Image Hover funktioniert überraschend nicht?
@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 --*/
*
{
\t margin: 0;
\t border: 0;
\t padding: 0;
}
body
{
\t background-image: url('../Images/background.png');
\t background-repeat: repeat-x;
\t
}
.clearfix
{
\t clear:both;
}
#wrapper
{
\t margin: 0 auto;
\t max-width: 1120px;
\t overflow: auto; \t
\t border: 1px solid black;
}
#main_header
{
\t width: 100%;
\t font-family: 'Black Ops One', sans-serif;
\t background-color: black;
\t border: 1px solid black;
\t color: white;
}
#main_header h1
{
\t float: left;
\t font-size: 380%;
\t margin: -10% 0 0 2%;
\t
}
#callout
{
\t margin: 50px 20px 0 0;
}
#callout h2{
\t text-align: right;
\t color: white;
}
#callout p{
\t text-align: right;
\t padding: 0%;
\t color: grey;
\t font-size: 20px;
\t margin-bottom: 3px;
}
#nav_menu
{
\t
\t width: 100%;
\t height: 10%;
\t background-color: white;
}
#nav_menu li
{
\t display: inline-block;
\t margin: 20px 20px 20px 63px;
\t font-family: 'Open Sans', sans-serif;
\t font-size: 20px;
\t font-weight: bold;
}
#nav_menu li a
{
\t text-decoration: none;
\t color: black;
}
#nav_menu li a:hover
{
\t color: grey;
}
#content_area
{
width: 100%;
margin: 10px;
}
.sub-menu
{ \t
\t position: absolute;
\t background-color: white;
\t list-style-type: none;
\t width: 5px;
\t display: none;
\t z-index: 60;
\t border-radius: 15px;
}
#nav_menu .sub-menu li a
{
\t color: black;
}
#nav_menu li:hover .sub-menu
{
\t display: block;
}
#nav_menu li .sub-menu
{
\t width: 16.5%;
}
#nav_menu li .sub-menu li
{
\t display: block;
\t margin-left: 20px;
}
.sub-menu li:hover
{
\t color: green;
\t background-color: yellow;
}
/*--- Start Image Slider --*/
.slider{
\t max-width: 1100px;
\t box-shadow: 0px 0px 0px 0 rgba(0, 0, 0, 0.07);
}
.slider1 img{
\t width: 100%;
\t margin: 0 auto;
}
.slider .bx-wrapper .bx-controls-direction a{
\t outline: 0 none;
\t position: absolute;
\t text-indent: -9999px;
\t top: 40%;
\t height: 71px;
\t width: 40px;
\t transition: all 0.7s;
}
.slider .bx-wrapper:hover .bx-controls-direction a{
\t
}
.slider .bx-wrapper .bx-prev{
\t background: url("../Images/arrow_left.png") no-repeat 7px 9px;
\t left: 0px;
}
.slider .bx-wrapper .bx-prev:hover{
\t background: url("../Images/arrow_left.png") no-repeat 8px 15px;
}
.slider .bx-wrapper .bx-next{
\t background: url("../Images/arrow_right.png") no-repeat 10px 12px;
\t right: 0px;
}
.slider .bx-wrapper .bx-next:hover{
\t background: url("../Images/arrow_right.png") no-repeat 10px 17px;
}
/*--- End Image Slider --*/
.one-third img{
\t text-align: center;
\t max-width: 100%;
\t height: auto;
\t opacity: 0.9;
}
.border_section p{
\t font-family: 'Lato', sans-serif;
\t padding: 2%;
\t color: white;
\t text-align: justify;
}
.border_section h3
{
\t font-family: 'Open Sans', sans-serif;
\t text-align: center;
\t color: white;
\t text-transform: uppercase;
\t letter-spacing: 1%;
}
.border_section
{
\t border: 1px solid black;
\t 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{
\t font-family: 'Open Sans', sans-serif;
\t font-weight: bold;
\t text-align: center;
\t width: 100%;
\t height: 6%;
\t background-color: black;
\t overflow: auto;
}
footer p
{
\t margin-top: 1%;
\t color: white;
}
<div class="border_section">
<img class="guitarLogo" src="../Images/Guitar Brands/ibanezLogo.jpg" runat="server"/>
\t \t </div>
\t </section>
<section class="one-third">
\t \t <div class="border_section">
\t \t \t <img class="guitarLogo" src="../Images/Guitar Brands/fenderLogo.jpg" runat="server"/>
\t \t </div>
\t </section>
<section class="one-third">
\t \t <div class="border_section">
\t \t \t <img class="guitarLogo" src="../Images/Guitar Brands/gibsonLogo.jpg" runat="server"/>
\t \t </div>
\t </section>
<section class="one-third">
\t \t <div class="border_section">
\t \t \t <img class="guitarLogo" src="../Images/Guitar Brands/prsLogo.jpg" runat="server"/>
\t \t </div>
\t </section>
<section class="one-third">
\t \t <div class="border_section">
\t \t \t <img class="guitarLogo" src="../Images/Guitar Brands/ernieballLogo.jpg" runat="server"/>
\t \t </div>
\t </section>
<section class="one-third">
\t \t <div class="border_section">
\t \t \t <img class="guitarLogo" src="../Images/Guitar Brands/espLogo.jpg" runat="server"/>
\t \t </div>
\t </section>
Könnten Sie vielleicht eine Geige machen, ein Bild? Sind Sie sicher, dass es nicht funktioniert? Wenn die Hintergrundfarbe eines '![]()
' Elements geändert wurde, habe ich das Gefühl, dass es hinter dem Bild selbst versteckt wäre. –
Es wäre viel hilfreicher, nur das relevante CSS zu posten anstatt alles – imjared
Sie kann Hintergrundeigenschaft eines Bildes wie dieses nicht einstellen. Wenn Sie ein blaues Overlay erstellen möchten, fügen Sie ein div mit blauer Hintergrundfarbe hinzu, das beim Hover eingeblendet wird. –