Solved

CSS hover question

Posted on 2011-03-01
5
207 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The viewer will learn how to dynamically set the form action using jQuery.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

920 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now