Forums
View unanswered posts | View active topics It is currently Sat Dec 16, 2017 7:05 am



Reply to topic  [ 1 post ] 
 Styles not applied on :hover with adjacent css selector 
Author Message

Joined: Wed Nov 02, 2011 9:46 am
Posts: 4
Post Styles not applied on :hover with adjacent css selector
I have a link that is styled to look like a button with some CSS3 (border-radius, etc) - I'm using PIE to get the CSS3 to work in IE7-8. The styles work when the link is in its normal state. However when the link is in its hover state, the styles aren't applied. Specifically, in the hover state, the second <a> doesn't show the background-color change nor the border-color change - it *does* show the text color change. If you hover over the second <a> itself, all styles are seen correctly. It's only when hovering over the first <a> that you don't see the styles on the second <a>.

The HTML looks something like this (this is not the full HTML, it's just to help you visualize what's going on - the CSS selectors below are correct, however):

Code:
<div>
    <a href="#">
        <span>Text</span>
    </a>
    <div>
        <a href="#">more text</a>
    </div>
</div>


I want the second <a> to receive hover styles when either the first <a> or the second <a> are hovered over. Here is the CSS:

Code:
#CategoryItemsContainer .categorygroup-category .product .productCustomizeButtons .button,
#CategoryItemsContainer .categorygroup-category .product .productCustomizeButtons .button:visited {
   background: none repeat scroll 0 0 #FFFFFF;
   border: 1px solid #dedede;
   color: #cc092f;
   display: block;
   float: none;
   height: 17px;
   line-height: 17px;
   margin: 0 auto;
   padding: 4px 0;
   text-align: center;
   width: 104px;
   position: relative;
   z-index: 2;
   -moz-box-shadow: 0 2px 2px #c3c3c3;
   -webkit-box-shadow: 0 2px 2px #c3c3c3;
   box-shadow: 0 2px 2px #c3c3c3;
   zoom: 1;
}
#CategoryItemsContainer .categorygroup-category .product .productCustomizeButtons .button:hover,
#CategoryItemsContainer .categorygroup-category .product > a:hover + .productCustomizeButtons .button {
   background-color: #cc092f;
   color: #fff;
   border-color: #ad1a38;
}


Any ideas/thoughts?

Thanks!


Fri Dec 16, 2011 3:01 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 1 post ] 

Who is online

Users browsing this forum: No registered users and 4 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.