2
私はホバーエフェクトを作成しようとしています。マウスの動きに合わせて、イメージの色が青に変わります。私はすでに画像用のクラスを作成してCSSでスタイルを設定しましたが、まだ動作していません。私もzインデックスの変更を試みましたが、無駄です。CSS Image Hoverが驚くほど機能していませんか？
@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>
にオーバーレイ背景色が、あなたはおそらくフィドルを作るだろうか？また、それは動作していないと確信していますか？ '![]()
'要素の背景色が変更された場合、画像自体の背後に隠れるように感じます。 –
すべての代わりに関連するCSSだけを投稿するともっと便利になります – imjared
このような画像の背景のプロパティを設定することはできません。青色のオーバーレイを作成したい場合は、青色の背景色を持つdivを追加します。これは、ホバー上で色あせます。 –