마우스를 올리면 Div와 텍스트가 함께 변경됨

mmdwc

스타일 시트에 문제가 있습니다 (또는 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 &#038; 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 &#038; 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] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

주변 텍스트와 함께 <Link>가 포함 된 <div> 표시

분류에서Dev

마우스를 올리면 Div가 검은 색으로 변

분류에서Dev

div 위에 마우스를 올리면 마커 아이콘 변경

분류에서Dev

div 위에 마우스를 올리면 마커 아이콘 변경

분류에서Dev

링크를 마우스로 가리키면 텍스트 변경

분류에서Dev

jQuery-div 애니메이션 : 마우스를 올리면 다른 div가 위치를 변경합니다.

분류에서Dev

latexmk 및 evince와 함께 vim-latex를 사용하면 텍스트가 깨져 표시됨 (GLib-GObject-CRITICAL)

분류에서Dev

마우스를 가리키면 텍스트를 다른 텍스트로 변환

분류에서Dev

축소판에 마우스를 올리면 CSS로 더 큰 div가 변경됩니다.

분류에서Dev

분리 된 div에 마우스를 올려 놓는 동안 Javascript로 범위의 텍스트 색상 변경

분류에서Dev

마우스를 올리면 표 테두리 변경

분류에서Dev

div에 마우스를 올리면 배경이 부드럽게 변경됩니다.

분류에서Dev

마우스를 올리면 배경 이미지를 전체 div로 가져오고 싶습니다.

분류에서Dev

CSS를 사용하여 마우스를 가리키면 Div 텍스트 표시

분류에서Dev

화면 캡처와 함께 텍스트를 추가하는 방법

분류에서Dev

<li> 위로 마우스를 가져 가면 div 크기 변경

분류에서Dev

텍스트를 추가하면 요소 위치가 변경됨

분류에서Dev

하이퍼 링크 위로 마우스를 가져 가면 텍스트 변경

분류에서Dev

한 Div에 마우스를 올리면 CSS를 사용하여 페이지의 다른 Div 클래스가 변경됩니까?

분류에서Dev

CSS 전용 : 공통 배경이있는 두 개의 div 중 하나에 마우스를 올려 놓으면 변경됨

분류에서Dev

div에서 CSS 호버링하지만 자녀에게 마우스를 올리면 안됨

분류에서Dev

ffmpeg 그리기 텍스트와 함께 스트림 복사

분류에서Dev

각 li 위에 마우스를 올리면 범위의 JQuery 변경 클래스

분류에서Dev

Flutter-setState ()와 함께 마운트를 사용하는 경우

분류에서Dev

이미지와 함께 마우스 오버시 소리 재생

분류에서Dev

마우스를 올리면 사라지는 div 위에 텍스트 또는 로고 배치

분류에서Dev

텍스트 상자 텍스트를 클릭하면 팝업 메뉴가 텍스트 상자와 함께 열립니다.

분류에서Dev

이미지와 텍스트 색상 중 하나를 가리키면 변경

분류에서Dev

마우스를 올리면 div를 회전하고 마우스를 떼면 계속 진행

Related 관련 기사

  1. 1

    주변 텍스트와 함께 <Link>가 포함 된 <div> 표시

  2. 2

    마우스를 올리면 Div가 검은 색으로 변

  3. 3

    div 위에 마우스를 올리면 마커 아이콘 변경

  4. 4

    div 위에 마우스를 올리면 마커 아이콘 변경

  5. 5

    링크를 마우스로 가리키면 텍스트 변경

  6. 6

    jQuery-div 애니메이션 : 마우스를 올리면 다른 div가 위치를 변경합니다.

  7. 7

    latexmk 및 evince와 함께 vim-latex를 사용하면 텍스트가 깨져 표시됨 (GLib-GObject-CRITICAL)

  8. 8

    마우스를 가리키면 텍스트를 다른 텍스트로 변환

  9. 9

    축소판에 마우스를 올리면 CSS로 더 큰 div가 변경됩니다.

  10. 10

    분리 된 div에 마우스를 올려 놓는 동안 Javascript로 범위의 텍스트 색상 변경

  11. 11

    마우스를 올리면 표 테두리 변경

  12. 12

    div에 마우스를 올리면 배경이 부드럽게 변경됩니다.

  13. 13

    마우스를 올리면 배경 이미지를 전체 div로 가져오고 싶습니다.

  14. 14

    CSS를 사용하여 마우스를 가리키면 Div 텍스트 표시

  15. 15

    화면 캡처와 함께 텍스트를 추가하는 방법

  16. 16

    <li> 위로 마우스를 가져 가면 div 크기 변경

  17. 17

    텍스트를 추가하면 요소 위치가 변경됨

  18. 18

    하이퍼 링크 위로 마우스를 가져 가면 텍스트 변경

  19. 19

    한 Div에 마우스를 올리면 CSS를 사용하여 페이지의 다른 Div 클래스가 변경됩니까?

  20. 20

    CSS 전용 : 공통 배경이있는 두 개의 div 중 하나에 마우스를 올려 놓으면 변경됨

  21. 21

    div에서 CSS 호버링하지만 자녀에게 마우스를 올리면 안됨

  22. 22

    ffmpeg 그리기 텍스트와 함께 스트림 복사

  23. 23

    각 li 위에 마우스를 올리면 범위의 JQuery 변경 클래스

  24. 24

    Flutter-setState ()와 함께 마운트를 사용하는 경우

  25. 25

    이미지와 함께 마우스 오버시 소리 재생

  26. 26

    마우스를 올리면 사라지는 div 위에 텍스트 또는 로고 배치

  27. 27

    텍스트 상자 텍스트를 클릭하면 팝업 메뉴가 텍스트 상자와 함께 열립니다.

  28. 28

    이미지와 텍스트 색상 중 하나를 가리키면 변경

  29. 29

    마우스를 올리면 div를 회전하고 마우스를 떼면 계속 진행

뜨겁다태그

보관