IMG shadow onmouse hover CSS

Question

스타 이미지 (7.1 임)에 마우스를 올려 놓으면 그림 주위의 별처럼 그림자 주위에 그림자가 생기고 싶습니다.

문제는 마우스 오버시 star가 shadowd (그림에서 1 번)이지만, 텍스트 7.1에 마우스를 올리면 별이 보이지 않는 것입니다 (그림 2). .item;

.item-rating.rating IMG을 {16px 여백 오른쪽 :} 그래서 숫자가 필요한 7.1 이상 마우스를 움직일 때 화면 번호 여기에 1

에서처럼 보이는 할 것은 내 CSS 코드입니다 -rating.rating img : hover {-webkit-filter : drop-shadow (0px 0px 14px rgba (0,0,0,0.5));}

div # rating {margin-left : 36px; margin-top : -32px; 위치 : 절대;}

등급 img는 star.png의 이미지이며 div # rating은 텍스트 7.1입니다.

해결 방법? 나는 z-index로 놀고 있었고 absoulute와 relative를두고 있었지만 나간다.

Answer 1

텍스트 < DIV> 7.1 </DIV> 에 대한 사업부를 만들고 DIV 아니라 스타의 이미지에 이벤트를 통해 이동에 추가합니다. 나는 이것이 무엇을하려고하는지 생각한다. 현재 이미지가 아닌 텍스트에 onmouse 이벤트를 추가하면됩니다.

Answer 2

세 번째 div를 만듭니다. 이 div에서는 별과 텍스트 div를 모두 배치합니다. 그 안에 들어있는 두 개가 들어있는 div에 마우스 오버를 추가 할 수 있습니다. 두 항목 위로 마우스를 가져 가면 별에 그림자가 생깁니다.