1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.
  2. Better Analytics for WordPress Get It Free

How to not effect child elements in CSS?

Discussion in 'HTML & Website Design' started by L1v1, Feb 23, 2012.

  1. #1
    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.
     
    L1v1, Feb 23, 2012 IP
  2. JohnnyMazuma

    JohnnyMazuma Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    What's your "enter" class for the span?
     
    JohnnyMazuma, Feb 23, 2012 IP
  3. L1v1

    L1v1 Greenhorn

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #3
    I haven't defined a style for this class yet.
     
    L1v1, Feb 23, 2012 IP
  4. JohnnyMazuma

    JohnnyMazuma Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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
     
    JohnnyMazuma, Feb 23, 2012 IP
  5. L1v1

    L1v1 Greenhorn

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #5
    I want to take action when I hover over my image, not my text.
     
    L1v1, Feb 24, 2012 IP
  6. creativewebmaster

    creativewebmaster Active Member

    Messages:
    647
    Likes Received:
    6
    Best Answers:
    4
    Trophy Points:
    78
    #6
    you can manage it in this way: div#image ul li span
     
    creativewebmaster, Feb 24, 2012 IP
  7. L1v1

    L1v1 Greenhorn

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #7
    My background image is in div#image called by my background-image method, not in div#image ul li span.
     
    L1v1, Feb 24, 2012 IP