/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] list

Copy linkTweet thisAlerts:
Jan 27.2008

Hi, i have an ordered list that has 4 links listed

[code=html]<div class=”details”>
<ol>
<a href=”#”><li>link 1</li></a>
<a href=”#”><li>link 2</li></a>
<a href=”#”><li>link 3</li></a>
<a href=”#”><li>link 4</li></a>
</ol>
</div>[/code]

My CSS for the class is:

[CODE].details li
{
margin: 10px 0px 10px 0px;
padding-left: 20px;
background-image: url(../images/arrow.gif);
background-position: left center;
background-repeat: no-repeat;
}[/CODE]

However i want to add a hover effect on the list links so that the background arrow will change to arrow_o (different colour arrow) and that the text will change to black. Please can anyone help me with this code, thanks in advance

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@bathurst_guyJan 27.2008 — Your HTML is not nested correctly.
<i>
</i>&lt;div class="details"&gt;
&lt;ol&gt;
&lt;li&gt;&lt;a href="#"&gt;link 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;link 2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;link 3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#"&gt;link 4&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;/div&gt;
Then the CSS can be:
<i>
</i>.details li a
{
margin: 10px 0px 10px 0px;
padding-left: 20px;
background-image: url(../images/arrow.gif);
background-position: left center;
background-repeat: no-repeat;
}
.details li a:hover
{
background-image: url(../images/arrow_o.gif);
color: black;
}
Copy linkTweet thisAlerts:
@oo7mlauthorJan 28.2008 — thanks a million, although i did have to make one change to your code:

.details li

{

margin: 10px 0px 10px 0px;

}

.details li a

{

padding-left: 20px;

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

background-position: left center;

background-repeat: no-repeat;

text-decoration:none;

color:#FFFFFF;

}

.details li a:hover

{

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

color:#FFC600;

}


I can't believe how i had nested my code, thanks again for your help
×

Success!

Help @oo7ml spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...