0

I want when i mouse over star image and text inside star (which is 7.1) to get shadow around star - like in number 1 on picture.

The problem is when i mouseover over star then is shadowd(number 1 in picture), but when i mouseover on text 7.1 then is star not shadowed (picture number 2). So when i mouseover over number 7.1 it needs to be looking like in picture number 1.

Here is my css code:

.item-rating.rating img{margin-right: 16px;} .item-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; position: absolute;}

rating img is image of star.png and div#rating is the text 7.1.

How to fix this? I was playing with z-index and position absoulute and relative but no go.enter image description here

user1949029
  • 151
  • 1
  • 1
  • 8

2 Answers2

1

Create a div for text < div >7.1< / div > and add the on move over event to the div and not the star image. I think this is what u are trying to do. Currently what your doing is, adding the onmouse event to the image and not the text.

votelessbubble
  • 788
  • 6
  • 19
  • thanks...this solution works...here is code:
    Star
    6.7
    and here is css code: .item-rating.rating img{margin-left: -8px; margin-top: 32px;} div#rating{margin-left: 36px; margin-top: -32px; position: absolute;} div#rating2{margin-left: 4px; margin-top: -32px; position: absolute;} div#rating:hover{-webkit-filter: drop-shadow(0px 0px 14px rgba(0,0,0,0.5));} Thank You for an idea.     – user1949029 May 24 '13 at 10:58
1

Create a third div. In this div place both the star and the text div. You can then add the hover to the div containing the two that are inside it. This will create a shadow on the star when you hover over either items.

sam_7_h
  • 810
  • 3
  • 11
  • 23