Solved

CSS hover question

Posted on 2011-03-01
5
215 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

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

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

617 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