스타일 시트에 문제가 있습니다 (또는 JavaScript를 사용해야 할 수도 있습니다).
이미지와 텍스트 링크가 포함 된 div가 있습니다. 이미지와 텍스트는 모두 다른 페이지로 연결됩니다.
이미지 위로 마우스를 가져 가면 이미지 불투명도가 변경되고 텍스트 색상이 변경됩니다. 저건 완벽 해.
텍스트를 가리키면 텍스트 색상 만 변경되지만 이미지의 불투명도도 변경하고 싶습니다.
내 CSS 또는 내 HTML의 문제를 찾을 수 없습니다.
내 CSS는 다음과 같습니다.
.artists_menu{
width: 100%;
margin-top: -120px;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(grayscale.svg); /* Firefox 4+ */
filter: gray; /* IE 6-9 */
}
.bandeau{
height:7px;
background-color: #eeeeee
}
.cartouche_crop{
height: 240px;
overflow: hidden;
opacity:1;
webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.cartouche_crop:hover{
opacity:0.7;
ilter: alpha(opacity=70);
}
h1{
font-size: 36px;
text-transform: uppercase;
font-weight: normal;
background-color: lightgrey;
}
h1 a:hover{
color: magenta!important
}
a, a:active, a:visited {
color: black;
text-decoration: none;
transition: 0.2s ease;
-webkit-transition: color 0.2s ease-in;
-moz-transition: color 0.2s ease-in;
-o-transition: color 0.2s ease-in;
transition: color 0.2s ease-in;
}
a:hover {
color: magenta
}
그리고 내 HTML :
<a href="http://www.amsbooking.fr/mattieumoreau/artists/amine_edge_and_dance/" title="amine edge & dance">
<div class="bandeau"></div>
<div id="parent-57" class="parent-page">
<div class="cartouche_crop">
<img src="http://www.amsbooking.fr/mattieumoreau/wp-content/uploads/amine_11.jpg" class="artists_menu">
</div>
<div class="bandeau"></div>
<h1>amine edge & dance</h1>
<div class="bandeau"></div>
</div>
</a>
다음은 jsFiddle 링크이므로 실시간으로 볼 수 있습니다. http://jsfiddle.net/FkWxb/1/
아무도 이것으로 나를 도울 수 있습니까?
바이올린 : http://jsfiddle.net/FkWxb/3/
교체 :
.cartouche_crop:hover{opacity:0.7;filter: alpha(opacity=70);}
으로
a:hover .cartouche_crop{opacity:0.7;filter: alpha(opacity=70);}
제거
h1 a:hover{color: magenta!important}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다