CSS를 사용하여 중첩 된 요소의 배경색 변경 : a hover

다음 스크립트의 #box 및 #internalArrow 요소의 배경색을 a : hover {background-color : rgb (189, 64, 132);} 구조.CSS를 사용하여 중첩 된 요소의 배경색 변경 : a hover

이것은 내가 가지고있는 것입니다.

 <style type="text/css"> 
    #box 
    {     
     background-color: rgb(217, 9, 122); 
     height: 50px; 
     width: 50px; 

     position: absolute;    
     top:50% 

    } 

    #box:after { 
     content: ' '; 
     height: 0; 
     position: absolute; 
     width: 0;   

     border: 20px solid transparent; 
     border-right-color: #ffffff; 

     top: 50%; 
     left: 10%; 
     margin-left:-15px; 
     margin-top:-20px; 
    }  

    #internalArrow 
    { 
     width:0; 
     height:0; 
     position:absolute; 

     border: 20px solid transparent; 
     border-right-color: rgb(217, 9, 122);  

     top: 50%; 
     left: 10%; 
     margin-left:-5px; 
     margin-top:-20px;  
     z-index:100;    

    } 

    #box:hover + #internalArrow 
    { 
     background-color:rgb(189, 64, 132); 
    } 

    #wrapper 
    { 
     height:600px; 
     width:50px; 
     background-color:#ffffff; 
     opacity:0.9; 
    } 

</style> 

</head> 
<body> 
<div id="wrapper"> 
<div id="box">   
    <a id="anchor" href=""><div id="internalArrow"></div></a>   
</div> 
</div> 

</body>

나는이 이전 대답 On a CSS hover event, can I change another div's styling?을 사용했지만 나에게 적합하지 않습니다. Chrome과 Firefox에서 사용해 보았습니다. 어떤 아이디어? 감사합니다. . 당신의 CSS에서

출처

2014-04-11 Welshboy

+를 꺼내면 작동합니다. –

당신은 :

여러 CSS 셀렉터가 ,

#box:hover, #internalArrow:hover 
    { 
     background-color:rgb(189, 64, 132); 
    }

EDIT로 표시해야

#box:hover + #internalArrow 
    { 
     background-color:rgb(189, 64, 132); 
    }

: 죄송합니다 그냥 질문을 다시 읽고 당신을위한 바른 길에 있었다 요소의 배경을 변경했지만 인접한 형제 조합자인 +이라는 표기법을 사용했습니다. 이 #box

참조 다음 경우는 '+'에만 작동

#box:hover #internalArrow 
     { 
      background-color:rgb(189, 64, 132); 
     }

이 #internalArrow이 #box에 포함되어 있음을 나타냅니다 :

모두 당신이해야 할 '+'를 제거하고이 할 수있다 jsFiddle

출처

2014-04-11 14:43:55

죄송합니다. 아직 작동하지 않습니다. 어쩌면 : after selector를 사용하는 것과 관련이있을 수 있습니다. 그래도 고마워. – Welshboy

Hey @Welshboy 나는 그것을 작동시킬 수 있었다 : http://jsfiddle.net/u7tYE/3685/ '#box : hover # internalArrow'로 선택자를 변경했다. 왜냐하면'# internalArrow'가 포함되어 있기 때문이다. '# box'. 편집 된 보스보기 –

안녕하세요 Ryan, 게시하기 전에 해당 사이트에갔습니다. 그런 조합을 시도했지만 저에게 효과적이지 않습니다. 나는 계속 노력할 것이다. 감사. – Welshboy

-1

.box .internalArrow { 
    background-color: #whatever 
};

출처

2014-04-11 14:46:51 Shakesy

CSS를 사용하여 중첩 된 요소의 배경색 변경 : a hover

답변

관련 문제