how to use different IDs for one Element in CSS

Question

I want to display 3 different rollover image on mouse hover over of 3 different<a> element. For this i have use following mechanism but this doesn't solve any purpose. this is as follows:-



 #item1 a {
    position: absolute;

    background-image:url("../images/step1_without_rollover.gif");
    }

#item1 a:hover 
    {
        position: absolute;

       background-image:url("images/step1_rollover.gif");


}

#item2 a{
        position: absolute;

    background-image:url("../images/step2_without_rollover.gif");


}

#item2 a:hover {
    position: absolute;

    background-image:url("../images/step2_rollover.gif");


}

#item3 a{
        position: absolute;

    background-image:url("../images/step3_without_rollover.gif");


}

#item a:hover {
    position: absolute;

    background-image:url("../images/step3_rollover.gif");


}

NOTE: i have only begining knowledge of CSS. it is registration process classified into 3 steps.

Thanks !!

Please suggest me the suitable way to perform this.. Thanks !! — Nikhil G
– Nikhil G, Commented Jun 23, 2011 at 6:38
When asking questions, it's always best to think: "If I were trying to answer this question, what would I want to know?" In this case, as the CSS has to apply to markup, it would be pretty important to see the markup. Also, taking the time to clean up the CSS to make it readable will encourage people to try to answer the question. (You can do that with the "edit" link under the question.) — T.J. Crowder
– T.J. Crowder, Commented Jun 23, 2011 at 6:40
I don't think I completely understand your question, but you can't have 3 different images for a hover state. Hover state means that either the mouse is over the a tag or not. That means that you can only have 2 states. Not 3. Hence you can't have 3 images for hover events. — sarcastyx
– sarcastyx, Commented Jun 23, 2011 at 6:41
@NiksBestJPro, if you have 3 steps and want to change the image for when a user moves through the steps, and it is the same page that has all the three steps, then you will need to change the images using javascript. If there are three different pages, then you will need three different ID's or a way for CSS to identify which page the user is on and display that image. Also remember that ID's must be unique on a page as Jose Faeti mentions below. — sarcastyx
– sarcastyx, Commented Jun 23, 2011 at 7:13

Benny Tjia · Accepted Answer · 2011-06-23 06:45:39Z

1

you have some unnecessary css codes there. See the code below. It hopefully does what you want. Try cleaning up your css codes a little before you post. that being said, I still dont understand why you need 3 image rollovers though..hope this helps

#item1
    {
      position: absolute;
      top: 492px;left :190px;width:400px; height:140px;
    }       
    #item1 a {
    background-image:url("images/image1.gif");
    }
     #item1 a:hover 
    {
    background-image:url("images/image2.gif");
    }

answered Jun 23, 2011 at 6:45

Benny Tjia

4,88310 gold badges42 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nikhil G Over a year ago

Thnx sir this code help me to display image hover effect for one image only; in the case of 3 different id it display last one image only.

Jose Faeti · Accepted Answer · 2011-06-23 07:15:54Z

0

I'm not sure what are you asking in the question, anyway remember that you cannot have more than one ID in the same HTML element, or the same ID in more than a HTML element. IDs must be unique.

EDIT As much as I know, achieving 3 different background-image changes to the same element using only a :hover state is not possible using only CSS. You need JavaScript to give the element or its parents different classes when you want the image to change.

edited Jun 23, 2011 at 7:15

answered Jun 23, 2011 at 6:57

Jose Faeti

12.3k6 gold badges40 silver badges53 bronze badges

2 Comments

Nikhil G Over a year ago

actually i want to display 3 (hover) images for 3 steps (that are linked to some web pages)

sarcastyx Over a year ago

By 3 steps you mean 3 different pages or 3 steps on the same page?

Xavier · Accepted Answer · 2011-06-26 08:43:20Z

0

html

<div id="items">
<a href="#" class="item1">Item 1</a>
<a href="#" class="item2">Item 2</a>
<a href="#" class="item3">Item 3</a>
</div>

css

#items
{
position:absolute;
top:490px;
left:190px;
width:400px;
height:50px;
}

#items a.item1
{
position:absolute; 
display:block; 
height:50px; 
width: 400px; 
top: 490px; 
left:242px; 
background:url("../images/step1_without_rollover.gif");
}
#items a.item1:hover
{
background:url("../images/step1_rollover.gif");
}

#items a.item2
{
position:absolute; 
display:block; 
height:50px; 
width: 400px; 
top: 490px; 
left:242px; /* don't forget to change your left value */
background:url("../images/step2_without_rollover.gif");
}
#items a.item2:hover
{
background:url("../images/step2_rollover.gif");
}

#items a.item3
{
position:absolute; 
display:block; 
height:50px; 
width: 400px; 
top: 490px; 
left:242px; /* don't forget to change your left value */
background:url("../images/step3_without_rollover.gif");
}
#items a.item3:hover
{
background:url("../images/step3_rollover.gif");
}

edited Jun 26, 2011 at 8:43

answered Jun 23, 2011 at 7:59

Xavier

8,34218 gold badges56 silver badges85 bronze badges

6 Comments

Nikhil G Over a year ago

Hello sir, i have implemented your suggestion but this type of style declaration for <a> element, cover all of the presence of <a> </pre> element which i dont want to disturb.

Nikhil G Over a year ago

i m sorry, i could not understand you what do you want to explain to me about adding up id around the styles/markup.

Xavier Over a year ago

what you can do is: #item a{ style } and then for each a give it a class with different styles, so for example #item a.one{ style } #item a.two{ style }

Nikhil G Over a year ago

Hello sir.. i followed your step but i couldn't find the desired output. ` #item a { position:absolute; top:490px; left:190px; width:400px; height:50px; } #item1 a.one:hover { position:absolute; display:block; height:50px; width: 400px; top: 490px; left:242px; background:url("../images/step2_ro.gif"); }` and similar style declaration for other id such as item2 a.one{style} and item3 a.one:hover{style} ...

Xavier Over a year ago

i have changed all the code you should be able to use it as a copy and paste solution now.

|

sarcastyx · Accepted Answer · 2011-06-26 23:41:32Z

0

Ok. I think I understand your point better now. So you have all the 3 steps on the same page. This means that you cannot have the same id 3 times on the page. You can do something like this though:

Edit

So you have three different pages. This means that you can use item1 id on all the different pages. But your stylesheet will still need to understand which page it is. You could wrap the item1 div around another div that has a different classname and then style it accordingly. If you go this way then this is what you will need to do:

HTML for Page 1:

<form class="page1" ...>
<div id="item1">
<a href="#">Step 1</a>
.....
</div>
</form>

HTML for Page 2:

<form class="page2" ...>
<div id="item1">
<a href="#">Step 2</a>
.....
</div>
</form>

HTML for Page 3:

<form class="page3" ...>
<div id="item1">
<a href="#">Step 3</a>
.....
</div>
</form>

And your stylesheet will look as follows:

#item1
{
position: absolute;
top: 492px;left :190px;width:400px; height:140px;
}
.page1 #item1 a {
background-image: url("images/image1.gif");
}
.page1 #item1 a:hover 
{
background-image:url("images/image1_hover.gif");
}
.page2 #item1 a {
background-image:url("images/image2.gif");
}
.page2 #item1 a:hover 
{
background-image:url("images/image2_hover.gif");
}
.page3 #item1 a {
background-image:url("images/image3.gif");
}
.page3 #item1 a:hover 
{
background-image:url("images/image3_hover.gif");
}

Or there is another way where you can use JavaScript to analyse the page and then change the background image based on that.

edited Jun 26, 2011 at 23:41

answered Jun 23, 2011 at 7:39

sarcastyx

2,22917 silver badges16 bronze badges

6 Comments

Nikhil G Over a year ago

i'm afraid that i could n't find page class but as i m an developer on microsoft.net technologies, there is some <form id="fomr1" runat ="server"> tag. so may i know that, is page class is equal to Form id or form1. Thanks!!

sarcastyx Over a year ago

@NiksBestJPro, Do you have forms like that on all the pages? And are they using the same id? Oh and it would be helpful if you could post some of your HTML code so that we can have a look at what is going on.

Nikhil G Over a year ago

yes sir, i have the web forms on all the pages.. and they are using the same ids for same type of formatting there. There is regProcess.html source code ` <html> <head> <link rel = "Stylesheet" type="text/css" href="styles/decorations1.css"/> </head><body> <form id="form1" runat="server"> <div id = "wrapper"> /*and other code goes there*/ </div></body></html>` Other pages also have the same form id name as form1, if i add another there than IDE will add up another automatically. Thanks!!

Nikhil G Over a year ago

@Sarcastyx sir: actually i can 't understand by the meaning of .pages class. if you could explain me a bit about .page class than i m sure it will not be difficult to understand your point explained in updated answer. Thanks!!

sarcastyx Over a year ago

@NiksBestJPro, you can give your form element a classname. That classname will help your stylesheet decide which styles to apply to the proper a tag. And I just found that I had a mistake in my answer with calling the right id's. I will update that.

|

Collectives™ on Stack Overflow

how to use different IDs for one Element in CSS

4 Answers 4

1 Comment

2 Comments

html

css

6 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

html

css

6 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related