How to not effect child elements in CSS?

Hello guys. Well I have a little issue and I can't solve it. So I have a structure of some DIV'S in my HTML code like this one.

<div id="image">
<ul>
<li>Sometext</li>
<li>Sometext</li>
<li>Sometext</li>
<li>Sometext</li>
<li>Sometext<span class="enter">Sometext</span></li>
</ul>
</div>

Code (markup):

And there is my CSS code part.

div#image{
    
background-image: url("whatever.png");
background-repeat:no-repeat;
display:block;
width:200px;
height:100%;
-webkit-transform:rotate(0deg);
-webkit-transition:-webkit-transform 1s; 
    
}
div#image:hover{
-webkit-transform:rotate(360deg);


}

Code (markup):

And the main problem is that I want to rotate only my div#image container background, but not all my div#image container with his child elements like <ul>, <li> and <span> How I could manage to do that? I know that I can do this with jQuery, but I am not very friendly with this library yet. Well in my opinion I should move all <ul><li> and <span> elements to another DIV. The other solution would be to add an image with <img> tag to the div#image container, delete the background-image line, mark the image with id and apply animation methods to it instead to all div#image container, but I am not actually sure if that would work. I hope you have some other ideas how to solve this issue. The jQuery or javascript solution would be perfect, as I am studying jQuery and javascript now.

 

What's your "enter" class for the span?

 

I haven't defined a style for this class yet.

 

As I understand your CSS, you're setting the :hover on the div with class="image". Shouldn't you have the :hover over the if you're wanting to have an action occure when someone mouses over the
text? Johnny Mazuma

 

I want to take action when I hover over my image, not my text.

 

you can manage it in this way: div#image ul li span

 

My background image is in div#image called by my background-image method, not in div#image ul li span.