squaredvision Posted June 17, 2009 Share Posted June 17, 2009 Hey guys,I have a box that has a hover state and a title that has a hover state.I want it so that when you hover over the box the title hovers as well, so that both elements get the hover at the same time.See link example screenshot:http://img25.yfrog.com/img25/9720/examplev.gifThis is the HTML with CSS:http://www.squaredvision.com/hovermulti.htmlCan someone help me get it to work so when you mouse over the box it highlights the border and the title section at the same time?-Thank you,Michael Link to comment Share on other sites More sharing options...
smerny Posted June 17, 2009 Share Posted June 17, 2009 probably ad "display: block;" to the CSS of the Aedit: clicked your second link and now assume you are looking for something else Link to comment Share on other sites More sharing options...
dsonesuk Posted June 17, 2009 Share Posted June 17, 2009 had ###### of time to get this to work cross-browser wise, but finally came up with this<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">a {text-decoration:none;} /*problem with Chrome showing underline*/.instantQ_Box { border-width: 1px; border-style:solid; border-color: #CCC; height: 180px; width: 249px; }:link:hover, :link:hover div.instantQ_Box, a:hover div.instantQ_Box { border-color: #f86d1e;}.titleBox1 { position: relative; top: 20px; background-color: #f86d1e; padding: 8px 5px 8px 5px; font-family: Tahoma, Geneva, sans-serif; font-size: 12px; font-weight: bold; color: #fff; }a:hover div.titleBox1 { background-color: #dd5000; }</style></head><body><div style="width: 249px;"><a href="#"><div class="instantQ_Box"><div class="titleBox1">Testing one two</div></div></a></div></body></html> Link to comment Share on other sites More sharing options...
squaredvision Posted June 17, 2009 Author Share Posted June 17, 2009 that is perfect! thank you, for you time on this i really appreciate it. - michael. Link to comment Share on other sites More sharing options...
squaredvision Posted June 17, 2009 Author Share Posted June 17, 2009 can you explain the syntax in the CSS that you used, some of the code i have never seen written before...like: :link: Link to comment Share on other sites More sharing options...
dsonesuk Posted June 17, 2009 Share Posted June 17, 2009 I picked up this method from this site, ages ago: http://dbaron.org/css/1999/09/links_demo Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.