Solved

CSS hover question

Posted on 2011-03-01
5
209 Views
Last Modified: 2012-05-11
I have this page:
http://tinyurl.com/4gg59ly

On the text "be classc lifestyle" I am trying to achieve a hover effect using this chunk of code:

.bottom-two-panels .lifestyle a:hover{
      position:absolute;
      top:-15px;
      left:85px;
      width:426px;
      height:106px;
      background:url(images/lifestyle-bg-image-active.png) 0 0 no-repeat;
      display:block;
      color:#2f2b2c;
      text-decoration:none;
}

It does not seem to be working. Any idea what I am doing wrong?
.bottom-two-panels {
	background:url(images/bottom-bg.jpg) 0 0 no-repeat;
	height:76px;
	position:relative;
}
.bottom-two-panels a:hover {
	text-decoration:underline;
}
.bottom-two-panels .lifestyle {
	position:absolute;
	top:-15px;
	left:85px;
	width:426px;
	height:106px;
	background:url(images/lifestyle-bg-image.png) 0 0 no-repeat;
	display:block;
	color:#2f2b2c;
	text-decoration:none;
}

.bottom-two-panels .lifestyle a:hover{
	position:absolute;
	top:-15px;
	left:85px;
	width:426px;
	height:106px;
	background:url(images/lifestyle-bg-image-active.png) 0 0 no-repeat;
	display:block;
	color:#2f2b2c;
	text-decoration:none;
}


.bottom-two-panels .lifestyle-on {
	position:absolute;
	top:-15px;
	left:85px;
	width:426px;
	height:106px;
	background:url(images/lifestyle-bg-image-active.png) 0 0 no-repeat;
	display:block;
	color:#2f2b2c;
	text-decoration:none;
}
.bottom-two-panels .lifestyle span {
	display:block;
	padding:48px 0 0 150px;
}
.bottom-two-panels .lifestyle-on span {
	display:block;
	padding:48px 0 0 150px;
}
.bottom-two-panels .lookbook {
	position:absolute;
	top:-15px;
	right:85px;
	width:426px;
	height:106px;
	background:url(images/lookbook-bg-image.png) 0 0 no-repeat;
	display:block;
	color:#2f2b2c;
	text-decoration:none;
}
.bottom-two-panels .lookbook-on {
	position:absolute;
	top:-15px;
	right:85px;
	width:426px;
	height:106px;
	background:url(images/lookbook-bg-image-active.png) 0 0 no-repeat;
	display:block;
	color:#2f2b2c;
	text-decoration:none;
}
.bottom-two-panels .lookbook span {
	display:block;
	padding:48px 0 0 150px;
}
.bottom-two-panels .lookbook-on span {
	display:block;
	padding:48px 0 0 150px;
}

Open in new window

0
Comment
Question by:lvollmer
  • 2
  • 2
5 Comments
 
LVL 34

Expert Comment

by:Paul MacDonald
ID: 35008941
You could try specifying a high Z-order value to see if that helps.
0
 
LVL 9

Accepted Solution

by:
CCSOFlag earned 500 total points
ID: 35009024
it's because your lifestyle class is a part of your anchor tag.  You are specifying to do this on an anchor INSIDE your lifestyle class.  Change it to this:

.bottom-two-panels a.lifestyle:hover{
      position:absolute;
      top:-15px;
      left:85px;
      width:426px;
      height:106px;
      background:url(images/lifestyle-bg-image-active.png) 0 0 no-repeat;
      display:block;
      color:#2f2b2c;
      text-decoration:none;
}
0
 

Author Comment

by:lvollmer
ID: 35009132
CCS - that works great, but when I try to apply the same style to the "lookbook" div it freaks out a bit:

.bottom-two-panels a.lookbook:hover{
      position:absolute;
      top:-15px;
      left:85px;
      width:426px;
      height:106px;
      background:url(images/lookbook-bg-image-active.png) 0 0 no-repeat;
      display:block;
      color:#2f2b2c;
      text-decoration:none;
}

0
 

Author Closing Comment

by:lvollmer
ID: 35009915
nm, just had to change the left value to get it working. thanks!!!
0
 
LVL 9

Expert Comment

by:CCSOFlag
ID: 35010628
sorry was in a meeting.  Glad it's working now.  Thanks for the points.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question