target multiple html properties with css:hover

I'm trying to use the css hover, and I have it working on a div by 开发者_如何转开发doing:

#complete-paper:hover{

background:url('/static/images/blue-aarow.jpg') no-repeat;
background-position:192px 35px;
background-color:#17aedf;
color:#ffffff;
 }

my question is, is there a way to target another html element, like a totally unrelated div, when I hover over the property with the ID of complete-paper? So when you hover over the div with complete-paper, it'll do the above hover css changes, as well as change another div on the page?

Thanks

Edit: The question I had is if it's possible if the div's are unrelated. But in this case they are related, It's actually a p inside a div when you hover over the div, I want the p to also change

Not unless the other div is nested in #compete-paper where the css would look like:

#complete-paper:hover{
    background:url('/static/images/blue-aarow.jpg') no-repeat;
    background-position:192px 35px;
    background-color:#17aedf;
    color:#ffffff;
}

#complete-paper:hover .other-div{
    /* different css */
}

Not unless the other div is a descendant or sibling of the hovered element.

Since you said it's a descendant, then do it like this:

#complete-paper:hover #decendant_id {
     // stuff
}

While the actual HTML elements in the file must be either nested or contained in a single element to be valid ':hover' targets to each other, the css 'position' attribute can be used to display any element where ever you want. I used position:fixed to place the target of my ':hover' action where I wanted it on the user's screen regardless to its location in the HTML document.

So the element is where the browser wants it in the code, and where the user wants it on the screen.

See detailed post->