CODEWITHSUNDEEP
htmlcsshyperlink
wjatevrr
wjatevrr

Reputation: 61

Change a different link color on mouseover

I have a menu composed of multiple links, each followed by a descriptive paragraph. I need the paragraph to change color whenever the proper link is highlighted, and vice-versa.

Essentially, I'm looking for a way to do a:hover and it will change a different link than itself (ideally using CSS only, I'd like to avoid using JS or jQuery–if that is in fact possible at all).

Here's an example:

<a class="title" href="page1.html">Page 1</a>
<hr/>
<a class="description" href="page1.html">Description of Page 1</a>
<br><br>
<a class="title" href="page2.html">Page 2</a>
<hr/>
<a class="description" href="page2.html">Description of Page 2</a>
<br><br>
<a class="title" href="page3.html">Page 3</a>
<hr/>
<a class="description" href="page3.html">Description of Page 3</a>

Thanks guys!

Upvotes: 2

Views: 92

Answers (5)

andy mccullough
andy mccullough

Reputation: 9601

.title:hover + .description{
   <yourstyle>
}

but only when you remove your <hr/> as it only works on siblings immediately after

This is sooo much easier with Javscript/JQuery though, and wouldnt require you to change you markup to fit in with a CSS only solution

Upvotes: 0

G.L.P
G.L.P

Reputation: 7217

Try like this: Demo

<div class="title active"><a href="page1.html">Page 1</a>

    <hr/>
    <p class="description">Description of Page 1</p>
</div>
<br>
<br>
<div class="title"><a href="page2.html">Page 2</a>

    <hr/>
    <p class="description">Description of Page 2</p>
</div>
<div class="title">
    <br>
    <br>
<a href="page3.html">Page 3</a>

    <hr/>
    <p class="description">Description of Page 3</p>
</div>

CSS:

.title {
    color:green;
}
.title:hover>.description, .active>.description {
    color:red;
    background:yellow;
}

Upvotes: 0

FalcoB
FalcoB

Reputation: 1333

you can do this... you just have to add a class to identify the pages! 

a.page_1:hover ~ a.description.page_1{
  color:green;
}
<a class="title page_1" href="page1.html">Page 1</a>
<hr/>
<a class="description page_1" href="page1.html">Description of Page 1</a>
<br><br>
<a class="title" href="page2.html">Page 2</a>
<hr/>
<a class="description" href="page2.html">Description of Page 2</a>
<br><br>
<a class="title" href="page3.html">Page 3</a>
<hr/>
<a class="description" href="page3.html">Description of Page 3</a>

Upvotes: 0

Ulad Kasach
Ulad Kasach

Reputation: 12908

You can do this with pure CSS if you wrap the elements under one parent element (div,p,etc)

Remember to change the anchor styling so that it enables you to change the color. a{color:inherit}

.colorChanger {
  color:green;
}
.colorChanger:hover {
  color:blue;
}
a{
  color:inherit;
}
<div class = 'colorChanger'>
  <a class="title" href="page3.html">Page 1</a>
  <hr/>
  <a class="description" href="page3.html">Description of Page 1</a>
</div>
<br><br>
<div class = 'colorChanger'>
  <a class="title" href="page3.html">Page 2</a>
  <hr/>
  <a class="description" href="page3.html">Description of Page 2</a>
</div>
<br><br>
<div class = 'colorChanger'>
  <a class="title" href="page3.html">Page 3</a>
  <hr/>
  <a class="description" href="page3.html">Description of Page 3</a>
</div>

Upvotes: 2

guillaume26
guillaume26

Reputation: 39

This css rule should do the job

.title:hover + .description {
    color: #ff0000;
}

Upvotes: -1

Related Questions