Altering Hues with a Click

Question

Altering Hues with a Click

One thing I wanted to achieve was changing the color of a hyperlink once it's clicked.

I managed to make it work by using the code below:

var current = "home";

function home()
{
    current = "home";
    update2();
}

function comp()
{
    current = "comp";
    update2();
}

function team()
{
    current = "team";
    update2();
}

function cars()
{
    current = "cars";
    update2();
}

function spons()
{
    current = "spons";
    update2();
}

function update2()
{
    if (current == "home"){
        document.getElementById('home').style.cssText='color:#FFE006;font-size:20pt;text-shadow: -1px 1px 8px #ff9c00, 1px -1px 8px #ff9c00;';
        document.getElementById('comp').style.cssText='color:white;font-size:18pt;text-shadow:;';
        document.getElementById('team').style.cssText='color:white;font-size:18pt;text-shadow:;';
        document.getElementById('cars').style.cssText='color:white;font-size:18pt;text-shadow:;';
        document.getElementById('spons').style.cssText='color:white;font-size:18pt;text-shadow:;';
    } else if (current == "comp"){
        document.getElementById('home').style.cssText='color:white;font-size:18pt;text-shadow:;';
        document.getElementById('comp').style.cssText='color:#FFE006;font-size:20pt;text-shadow: -1px 1px 8px #ff9c00, 1px -1px 8px #ff9c00;';
        document.getElementById('team').style.cssText='color:white;font-size:18pt;text-shadow:;';
        document.getElementById('cars').style.cssText='color:white;font-size:18pt;text-shadow:;';
        document.getElementById('spons').style.cssText='color:white;font-size:18pt;text-shadow:;';
     } else if (current == "team"){
         document.getElementById('home').style.cssText='color:white;font-size:18pt;text-shadow:;';
         document.getElementById('comp').style.cssText='color:white;font-size:18pt;text-shadow:;';
         document.getElementById('team').style.cssText='color:#FFE006;font-size:20pt;text-shadow: -1px 1px 8px #ff9c00, 1px -1px 8px #ff9c00;';
         document.getElementById('cars').style.cssText='color:white;font-size:18pt;text-shadow:;';
         document.getElementById('spons').style.cssText='color:white;font-size:18pt;text-shadow:;';
     } else if (current == "cars"){
         document.getElementById('home').style.cssText='color:white;font-size:18pt;text-shadow:;';
         document.getElementById('comp').style.cssText='color:white;font-size:18pt;text-shadow:;';
         document.getElementById('team').style.cssText='color:white;font-size:18pt;text-shadow:;';
         document.getElementById('cars').style.cssText='color:#FFE006;font-size:20pt;text-shadow: -1px 1px 8px #ff9c00, 1px -1px 8px #ff9c00;';
         document.getElementById('spons').style.cssText='color:white;font-size:18pt;text-shadow:;';
     } else if (current == "spons"){
         document.getElementById('home').style.cssText='color:white;font-size:18pt;text-shadow:;';
         document.getElementById('comp').style.cssText='color:white;font-size:18pt;text-shadow:;';
         document.getElementById('team').style.cssText='color:white;font-size:18pt;text-shadow:;';
         document.getElementById('cars').style.cssText='color:white;font-size:18pt;text-shadow:;';
         document.getElementById('spons').style.cssText='color:#FFE006;font-size:20pt;text-shadow: -1px 1px 8px #ff9c00, 1px -1px 8px #ff9c00;';
     }
 }

Everything seemed to be working fine until an issue emerged. As you might have noticed, I attempted to modify properties such as color, size, and text shadow based on whether current is set to home/spons/cars/team/comp. The value of current changes when a function is called upon clicking a hyperlink.

The problem arises when I assign the same properties for the :hover state. Once a hyperlink is clicked, its properties change along with those of other hyperlinks to white color and 18 pt font size.

When a user clicks on a hyperlink, it updates a frame source, the link's own properties, and the properties of other hyperlinks. However, after clicking on one link and hovering over another, the hover properties cease to work while the JavaScript-assigned properties take effect.

If my conundrum is unclear, feel free to visit . Once a menu button is clicked, it alters the properties of the other buttons and disables the hover properties.

If you understand my predicament and happen to have a solution, I would appreciate your input.

Thank You in advance

javascript css hyperlink onclick hover

Answer 1

Answer №1

It's important to acknowledge the original poster's intentions of implementing changes beyond just altering text color. Unfortunately, many styling options for the :visited state no longer function as they once did.

In addition to adjusting font color, they are also increasing the font size and manipulating text shadow effects.

While I do understand that using JavaScript in this scenario may be excessive,

I would suggest to the original poster to consider having the menu links lead to separate pages instead of simply swapping out divs. This way, you can easily switch a "current" class from one link to another through manual means if necessary. Then, you can style it accordingly like so:

a.current {  /* styles */ }

This approach minimizes the chances of errors occurring and ensures smooth navigation with only HTML & CSS - no JavaScript needed.

Answer 2

It's important to acknowledge the original poster's intentions of implementing changes beyond just altering text color. Unfortunately, many styling options for the :visited state no longer function as they once did.

In addition to adjusting font color, they are also increasing the font size and manipulating text shadow effects.

While I do understand that using JavaScript in this scenario may be excessive,

I would suggest to the original poster to consider having the menu links lead to separate pages instead of simply swapping out divs. This way, you can easily switch a "current" class from one link to another through manual means if necessary. Then, you can style it accordingly like so:

a.current {  /* styles */ }

This approach minimizes the chances of errors occurring and ensures smooth navigation with only HTML & CSS - no JavaScript needed.

Answer 3

Answer №2

Creating hover effects in CSS is straightforward.

a:hover{background-color:yellow;}

Answer 4

Creating hover effects in CSS is straightforward.

a:hover{background-color:yellow;}

Answer 5

Answer №3

Next, implement the following code:

#house:visited, #apartment:visited{
    color:blue;
}

Alternatively, it's recommended to target all relevant links with a specific class name like 'bav' (blue after visited ;)) This way you can simplify your code:

.bav:visited{ color:blue; }

Best regards!

Answer 6

Next, implement the following code:

#house:visited, #apartment:visited{
    color:blue;
}

Alternatively, it's recommended to target all relevant links with a specific class name like 'bav' (blue after visited ;)) This way you can simplify your code:

.bav:visited{ color:blue; }

Best regards!

Answer 7

Answer №4

Provide the text color for a hyperlink in this format:

a:visited{
    color:red;
    }

Update:

Understood, if you prefer using JQuery, the concept is to have the menu items as <li> or any other element with images as background images. When creating these images, include both white and yellow colored text (CSS spriting), where clicking on a menu item adds a "selected" class to highlight it by displaying the yellow text, then removing the class from other items. For instance, I used an <a> tag as an example.

.menu a{
   background-image:url('images/button.png');
}
.menu a.selected {
     background-image:url('images/button.png'):0 -50px;
}

$(".menu a").live('click', function() {
  $(".menu a").removeClass("selected");
  $(this).addClass("selected");
  return false;
});

Refer to this post here

Answer 8

Provide the text color for a hyperlink in this format:

a:visited{
    color:red;
    }

Update:

Understood, if you prefer using JQuery, the concept is to have the menu items as <li> or any other element with images as background images. When creating these images, include both white and yellow colored text (CSS spriting), where clicking on a menu item adds a "selected" class to highlight it by displaying the yellow text, then removing the class from other items. For instance, I used an <a> tag as an example.

.menu a{
   background-image:url('images/button.png');
}
.menu a.selected {
     background-image:url('images/button.png'):0 -50px;
}

$(".menu a").live('click', function() {
  $(".menu a").removeClass("selected");
  $(this).addClass("selected");
  return false;
});

Refer to this post here

Altering Hues with a Click

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is causing the Bootstrap accordion to not display content when clicked on?

Tips for removing unnecessary debugging code from JavaScript when compiling or minifying your code

What is the best way to upload an object in React using fetch and form-data?

jQuery toggle buttons to show or hide on radio button selection

Arranging a flex item below another flex item within a flexbox container

An error in Coffeescript and Express.js: attempting to call the 'sliced' method on an undefined object

Unveil the power of the "Enter" key with these jQuery hacks

Limiting the use of JavaScript widgets to specific domains

Animate owlCarousel slide motion in reverse when using the Prev and Next buttons

Is there a way to trigger $q notify without initiating a $digest cycle?

How should elements be properly inserted into injected HTML code?

Utilize React Material UI to elegantly envelop your TableRows

correcting mistakes in the design of the website

The local authentication feature in NodeJS Passport is experiencing issues and not functioning properly

Incorporating external JavaScript into a Rails application

Using mappers to create a computed property for two-way binding

Troubleshooting error in WordPress: Changing innerHTML of dynamically created divs using JavaScript. Issue: 'Unable to set property innerHTMl of null'

I was able to resolve the fixed position issue of a button on Safari for iPhone 3G

Why are my div elements mysteriously adding bottom margin?

Refreshed page causing hide/show div to reset