Ways to implement two distinct background color changing features

Question

Ways to implement two distinct background color changing features

Is there a way to reset mouseover after mouseout for changing the background color of an element on mouseover, mouseout, and onclick events in Javascript?

        function init() {
          document.getElementById('default').onmouseover = function() {
            tabHoverOn('default', 'grey')
          };
          document.getElementById('default').onmouseout = function() {
            tabHoverOff('default', 'yellow')
          };
          document.getElementById('section2').onmouseover = function() {
            tabHoverOn('section2', 'grey')
          };
          document.getElementById('section2').onmouseout = function() {
            tabHoverOff('section2', 'yellow')
          };
          document.getElementById('section3').onmouseover = function() {
            tabHoverOn('section3', 'grey')
          };
          document.getElementById('section3').onmouseout = function() {
            tabHoverOff('section3', 'yellow')
          };
        }


        function tabHoverOn(id, bgcolor) {
          document.getElementById(id).style.backgroundColor = bgcolor;
        }

        function tabHoverOff(id, bgcolor) {
          document.getElementById(id).style.backgroundColor = bgcolor;
        }
        var current = document.getElementById('default');

        function tab1Highlight(id) {

          if (current != null) {
            current.className = "";
          }
          id.className = "tab1highlight";
          current = id;
        }

        function tab2highlight(id) {

          if (current != null) {
            current.className = "";
          }
          id.className = "tab2highlight";
          current = id;
        }

        function tab3highlight(id) {
          if (current != null) {
            current.className = "";
          }
          id.className = "tab3highlight";
          current = id;
        }
        window.onload = init();

body {
  width: 900px;
  margin: 10px auto;
}
nav {
  display: block;
  width: 80%;
  margin: 0 auto;
}
nav > ul {
  list-style: none;
}
nav > ul > li {
  display: inline-block;
  margin: 0 3px;
  width: 150px;
}
nav > ul > li > a {
  width: 100%;
  background-color: #ffff66;
  border: 1px solid #9b9b9b;
  border-radius: 12px 8px 0 0;
  padding: 8px 15px;
  text-decoration: none;
  font-weight: bold;
  font-family: arial, sans-serif;
}
main {
  display: block;
  width: 80%;
  margin: 0 auto;
  border: 1px solid #9b9b9b;
  padding: 10px;
}
main > h1 {
  font-size: 1.5em;
}
.tab1highlight {
  background-color: #339966;
  color: white;
}
.tab2highlight {
  background-color: #ff6666;
  color: white;
}
.tab3highlight {
  background-color: #6600ff;
  color: white;
}
main img {
  border: 5px solid #eeefff;
  width: 80%;
  margin-top: 20px;
}

<body>
<nav>
    <ul>
        <li><a href="#sec1" id="default" onclick="tab1Highlight(this)">Section 1</a></li>
        <li><a href="#sec2" id="section2" onclick="tab2highlight(this)">Section 2</a></li>
        <li><a href="#sec3" id="section3" onclick="tab3highlight(this)">Section 3</a></li>
    </ul>
</nav>
<main>
    <h1>Exercise: Navigation Tab #5</h1>
    <ul>
        <li>
            Combine the navigation tab exercises #1, #3, and #4 in one file, including <br>
            <ul>
                <li>temporarily change the background color of a tab when the cursor is hovering on it.</li>
                <li>set the foreground and background color of the tab being clicked.</li>
                <li>change the background color of the main element based on the selected tab.</li>
            </ul>
            <p>
                To test, click on a tab and then move your mouse around.  For example, the third tab is clicked, the tab background color is switched to blue.  Then hover the mouse over the third tab, the background color of the tab should be switch to light green and then back to blue after the mouse moves out.
            </p>

            <img src="menu_tab5.jpg">


        </li>
    </ul>
</main>

javascript events

Answer 1

Answer №1

To avoid cluttering JavaScript with CSS, it's best practice to keep them separate whenever possible. An effective solution for handling hover effects is using the CSS pseudo selector :hover instead of implementing color changes in JavaScript. Simply assign the same class to all tabs and define the required styles once:

.tab {
  background-color: yellow;
}

.tab:hover {
  background-color: grey;
}

After setting this up, you can manage click styling through CSS by adding or removing a specific class when a tab is clicked.

In your CSS file:

.tab.clicked {
  background-color: blue;
}

Then, in JavaScript, you can handle tab clicks like this:

var tabs = document.getElementsByClassName('tab');
for (i = 0; i < tabs.length; i ++) {
  tabs[i].onclick = function (ev) {
    for (i = 0; i < tabs.length; i ++) {
      tabs[i].classList.remove('clicked');
    }
    ev.currentTarget.classList.add('clicked');
  };
}

For a visual representation, check out this JSFiddle.

Answer 2

To avoid cluttering JavaScript with CSS, it's best practice to keep them separate whenever possible. An effective solution for handling hover effects is using the CSS pseudo selector :hover instead of implementing color changes in JavaScript. Simply assign the same class to all tabs and define the required styles once:

.tab {
  background-color: yellow;
}

.tab:hover {
  background-color: grey;
}

After setting this up, you can manage click styling through CSS by adding or removing a specific class when a tab is clicked.

In your CSS file:

.tab.clicked {
  background-color: blue;
}

Then, in JavaScript, you can handle tab clicks like this:

var tabs = document.getElementsByClassName('tab');
for (i = 0; i < tabs.length; i ++) {
  tabs[i].onclick = function (ev) {
    for (i = 0; i < tabs.length; i ++) {
      tabs[i].classList.remove('clicked');
    }
    ev.currentTarget.classList.add('clicked');
  };
}

For a visual representation, check out this JSFiddle.

Answer 3

Answer №2

Consider manipulating a Boolean variable

var Element = document.getElementById('default');
var pressed = false;

Element.onclick = function(){
    pressed = true;
    // insert more actions here
}
Element.onmouseover = function(){
    pressed = false;
    // insert more actions here
}
Element.onmouseout = function(){
    if(!pressed){
    // insert more actions here
    }
}

Answer 4

Consider manipulating a Boolean variable

var Element = document.getElementById('default');
var pressed = false;

Element.onclick = function(){
    pressed = true;
    // insert more actions here
}
Element.onmouseover = function(){
    pressed = false;
    // insert more actions here
}
Element.onmouseout = function(){
    if(!pressed){
    // insert more actions here
    }
}

Ways to implement two distinct background color changing features

Answer №1

Answer №2

Similar questions

"Encountering errors when attempting to load partials on the server-side

Find the highest value in a MySQL column

Convert HTML templates into JavaScript on the client side using Angular framework along with Browserify, Babel, ES2015, and Gulp

Jest Testing encounters an error: TypeError - the variable state.userInfo cannot be iterated

Phantom writing reminiscent of the ghostly prose found on a Tumblr registration

proper integration of socket.io

Tips for obtaining an Amazon email within an Alexa SDK V2 skill

Validation does not occur when the submit button has an ng-click event attached to it

Getting just the page path in Express.js can be achieved by utilizing the `req.path

Tips for storing arrays in AngularJS with JavaScript

Mapping objects in an array with Javascript

Navigating through the drupal module directory using JavaScript

AngularJS script to dynamically update a table upon selecting an option from the dropdown menu

Tips on destructuring an object property from a Pinia getter that may return an object based on a condition

Unable to display MathJax content on the HTML webpage

Is there a way for me to limit my usage of the async keyword in my code

The upcoming picture does not have a valid "width" or "height" attribute. Please ensure that these properties are set to numerical values

Utilizing the Command Line/Window feature within Visual Studio Code

How can I make the footer on my webpage have a white background?

Blinking magic of dynamic rendering with NextJs