We help IT Professionals succeed at work.

Hopefully easy css hover question

jameshuckabone
on
I am a fairly accomplished website designer but sadly have had no formal training and so certain gaps in my learning make themselves apparent from time to time, causing delays in my workflow.  This is one of those times.  On my current project, http://www.newspainwines.com/test/  I am trying to get the little "more info+" divs to change background color and text color when each "tile" is hovered over.  Can someone please help me with this?

http://www.newspainwines.com/test/

Thank you!!!
Comment
Watch Question

CERTIFIED EXPERT

Commented:
try

.scrollbox_div:hover   scrollbox_button{


}

Author

Commented:
I just tried and it didn't work, does it have anything to do with z-indexes?  Please check my code. :)   http://www.newspainwines.com/test/index.php
Top Expert 2013

Commented:
actually I think just

.scrollbox_button:hover { etc...

should do it
CERTIFIED EXPERT

Commented:
Do you want the button to change on a hover of the parent  or only on a hover of itself?
CERTIFIED EXPERT
Commented:
Sorry on mobile so can't check source now..

Try
scrollbox_div:hover  <  scrollbox_button{

Commented:
here you go
.scrollbox_div:hover .scrollbox_button{
    background-color: green;
    color:black;
}

Open in new window

Author

Commented:
Nothing has worked so far.

@Eval, your solution worked for the little button but broke the scrollbox_div style.
Top Expert 2013

Commented:
You've got I burried in so deep classes within classes within classes... that it is almost certain that someting along the chain through the document tress is going to be negatively affected.  there is such a thing as over styling and that is the problem here.

Getting right will probably a lucky guess, and the time you have to make a change it will probably get broken unlessyou simplify and reduce the number of styling layers.
CERTIFIED EXPERT
Commented:
alright.. let's do this the right way..

you can change a child through ccs..

so

.scrollbox_div:hover  <  .scrollbox_button{

that should do the trick.. if you have to you could go for the whole thing..

div#container div#content div#scrollbox div#scrollbox_div:hover < .scrollbox_button {
CERTIFIED EXPERT

Commented:
if you use jquery it's easier.

Author

Commented:
@p_nuts - thanks for the help but that didn't work either, as for jquery, could you elaborate?

@COBOL dinosaur - I know that my structure is probably not the best but it's the only way I could get the effect I wanted.  I had a goal of converting the Flash effect you see on http://www.bigyouth.fr/#/Reference/ to a css/javascript solution.  It's almost there except for a couple things, one being that I can't seem to style the button and it's driving me nuts!

Commented:
if you will put the class in the end of the css you will have no problems

Author

Commented:
Still didn't work.  I left the code with the suggestions so you could take a look and make sure I did it as suggested.  http://www.newspainwines.com/test/
Commented:
#scrollbox{
	width: 9222px;
	position: relative;
	margin: 0px;
}

.scrollbox_div{
	float: left;
	z-index: 80;
	width: 316px;
	margin: 0px 1px;
	height: 375px;
}

.scrollbox_img{
	position: relatve;
	z-index: 20;
	width: 316px;
	height: 200px;
	margin: 0;
	overflow: hidden;
}

.scrollbox_title{
	margin: 10px 15px 5px 10px;
	font-family: helvetica, arial, sans-serif;
	font-size: 18pt;
	letter-spacing: -1px;
}

.scrollbox_text{
	height: 88px;
	margin: 0 15px 0 10px;
	font-family: helvetica, myriad pro, arial, sans-serif;
	font-size: 11pt;
	position: relative;
	letter-spacing: -1px;
}

.scrollbox_button {
	position: relative;
	text-decoration: none;
	text-align: center;
	font-family: arial, sans-serif;
	font-size: 10pt;
	font-weight: bold;
	display: block;
	height: 20px;
	width: 85px;
	margin: 10px 0 0 10px;
	background-color: #333333;
	color: #ffffff;
}

.scrollbox_a{
	z-index: 10000;
	display: block;
	position: absolute;
	background-color: none;
	width: 316px;
	height: 375px;
	border-top: 10px solid none;
	border-left: 10px solid none;
	border-right: 10px solid none;
	border-bottom: 10px solid none;

}

.scrollbox_a:hover{
	border-top: 10px solid #000000;
	border-left: 10px solid #000000;
	border-right: 10px solid #000000;
	border-bottom: 10px solid #000000;
	width: 296px;
	height: 355px;
}

.scrollbox_div:hover{
    background-color: #000000;
    color: #ffffff;
}

.scrollbox_div:hover .scrollbox_button{
    background-color: yellow;
    color: green;
}

Open in new window

Author

Commented:
Thank you so much!

Explore More ContentExplore courses, solutions, and other research materials related to this topic.