Alter the color of a hyperlink when it is hovered over

Question

Alter the color of a hyperlink when it is hovered over

Looking to create a menu with links and descriptive paragraphs that change color when hovered over. Preferably done with CSS only, without the use of JS or jQuery.

For 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>

Thank you!

html css hyperlink

Answer 1

Answer №1

To achieve this effect using only CSS, you can group the elements under a single parent element (such as a div or a p).

Don't forget to adjust the anchor styling in order to be able 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>

Answer 2

To achieve this effect using only CSS, you can group the elements under a single parent element (such as a div or a p).

Don't forget to adjust the anchor styling in order to be able 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>

Answer 3

Answer №2

If you want to enhance the look of your pages, consider adding a unique class for identification!

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>

Answer 4

If you want to enhance the look of your pages, consider adding a unique class for identification!

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>

Answer 5

Answer №3

Give this a shot: Check out the demo here

<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;
}

Answer 6

Give this a shot: Check out the demo here

<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;
}

Answer 7

Answer №4

.header:hover + .details {
   <customstyle>
}

However, this effect will only work if you eliminate the <br/> as it specifically targets immediate sibling elements.

Implementing this with JavaScript or jQuery would be much simpler and wouldn't necessitate altering your HTML structure to conform to a CSS-only solution.

Answer 8

.header:hover + .details {
   <customstyle>
}

However, this effect will only work if you eliminate the <br/> as it specifically targets immediate sibling elements.

Implementing this with JavaScript or jQuery would be much simpler and wouldn't necessitate altering your HTML structure to conform to a CSS-only solution.

Answer 9

Answer №5

Here is a CSS snippet that can help solve this issue

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

Answer 10

Here is a CSS snippet that can help solve this issue

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

Alter the color of a hyperlink when it is hovered over

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

An error occurs when I attempt to run npm init

How can you apply the min-width property to a CSS element floating to the right?

Apply a CSS3 Box Shadow to a diagonal corner

The resize() function in jQuery triggers a stack overflow exception

Hide the 1, 2, 3 page buttons in Datatables pagination and instead display only the Next and Previous buttons for navigation

The image tag disrupting the spacing between lines

ChakraUI failing to display on the screen

The linear gradient feature in asp.net does not function properly on Internet Explorer versions 6 through 8

Tips for inserting an object model with a hyperlink attribute into a table cell using Django

Is there a way to design a mosaic-style image gallery featuring images of varying sizes in a random and dynamic layout, all without relying

Whenever I try to include something within the `componentWillUnmount` function,

Send a notification for every change made to a text field in Python

Using a background image in the navigation menu with CSS

Persist the modified contenteditable data into a JSON file by utilizing PHP Ajax

Guide to creating a dynamic amount of slides in a React carousel for optimal responsiveness

What is the name of the scrolling header effect achieved in the following?

What steps are required for my font to be displayed on my website?

Vue JS: Extracting both the unique ID and value from an array of input simultaneously

Building a stack of DIVs, some with fixed heights and others without, potentially using only CSS

Ways to vertically align a div in Bootstrap 4?