Adjust the color quantity based on the item that is being hovered over

I have a unique challenge at hand:

<table>
            <tr>
                <td class="order-delivered"><i>order</i><br/><i>delivered</i><br/>
                    <a class="check-mark">✔</a>
                </td>
                <td class="prep-pizza"><i>prep</i><br/><i>pizza</i><br/>
                    <a class="check-mark">✔</a>
                </td>
                <td class="bake-pizza"><i>bake</i><br/><i>pizza</i><br/>
                    <a class="check-mark">✔</a>
                </td>
                <td class="out-for-deliver"><i>out for</i><br/><i>delivery</i><br/>
                    <a class="check-mark">✔</a>
                </td>
            </tr>
        </table>

My goal is to create an interactive effect when hovering over certain classes. Specifically, when I hover over the prep-pizza class, it should change the text color of the a elements within both the prep-pizza and order-delivered classes.

Similarly, hovering over the bake-pizza class should change the text color of the a elements in the prep-pizza, order-delivered, and bake-pizza classes simultaneously.

Lastly, hovering over the out-for-deliver class should adjust the text color of all a elements within each td.

It's worth noting that only the check mark symbol should change color, not any other characters.

How can I achieve this dynamic effect where hovering targets multiple different class elements?

UPDATE:

The color change should be contextually based on the location of the current hover action.

For example, hovering solely over the order-delivered class should only affect the a element within that specific class.

htmlcsshover

Answer №1

Hopefully I've grasped what you're looking for, this should get the job done

tr:hover .check-mark,
td:hover .check-mark {
    color: blue;
}

td:hover ~ td .check-mark {
    color: black;
}

Give it a try here http://jsfiddle.net/1n75v7y1/

Answer №2

Experiment with this CSS snippet to modify the hover effect for the respective elements individually. To alter siblings as well, consider utilizing javascript or jquery.

.order-delivered:hover{
background-color: red;
}
.prep-pizza:hover{
background-color: red;
}
.bake-pizza:hover{
background-color: red;
}
.out-for-deliver:hover{
background-color: red;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Configuring a JavaScript calendar with custom margins

Having trouble selecting a date with the Bootstrap datepicker class. After running the snippet, the calendar appears below the textbox: <input type="text" class="form-control datepicker" name="due_date" id="due_date" onclick="calendar_up()" value="" pl ...

javascripthtmlbootstrap-4

Guide to adding a Json file in a PHP file with PHP

I have a PHP file with an embedded JSON file, and I want to update the JSON file with new information from a form. The form looks like this: <form action="process.php" method="POST"> First name:<br> <input type="text" name="firstName"> ...

javascriptphphtmljson

Ways to optimize the spacing between the menu bar and widgets

I have successfully incorporated multiple images side by side on my blog Following is the code used for this layout: <div class="images"> <figure> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSA7XLfGrT1rMS-Ifoguz-X2igsT ...

htmlcsscss-floatblogger

The same size background effect

I am looking to create a list of names that are all the same size. How can I achieve this using Bootstrap? <ul class="list-unstyled"> <li> <a class="btn btn-xs btn-warning"> <span >Loren ipsum</span> </a> ...

csstwitter-bootstrap-3

Increment array by 1 if the item is not already present in the array upon clicking the button

I have data stored in my VueJS component as a list, and it is rendered to the DOM using a v-for loop that iterates through each item in the array. I have a button that removes an item from the array, and now I am working on making the add button add back ...

javascripthtmlcssvue.js

Having trouble setting the selected option in Jquery by value?

I have exhausted all options found on the internet. What could I be overlooking? The desired option is not getting selected. Here is the troublesome section of code. I have also included some other attempts that I have commented out. If it helps, this li ...

javascriptjqueryhtml

Using jQuery to clear a textarea when a select input is changed

Currently, I am in the process of developing a small text editor that enables users to edit files and create new ones. Here is how I have set up my select menu. <select name="reportname" id="reportname" class="form-control"> <option value="zr ...

javascriptjqueryhtmlajax

Positioning a dropdown menu on top of a Google Map in React with JavaScript: Best Practices

I've been attempting to place a dropdown menu at a specific location on my Google Map, specifically in the top right (or top left is also acceptable). Below is the current output I am seeing: Here is the expected result: Modifications After trying ...

javascripthtmlcssnode.jsreactjs

Struggling to figure out the ::before border trim issue

As I work on designing a banner for a webpage, I have added a sliced bottom right border using the ::before pseudo class. The code snippet I used includes: &::before { content: ""; position: absolute; bottom: 0; right: 0; ...

csspseudo-element

Utilizing the nth-child selector to apply border-spacing to all rows except the first and last

I've been attempting to add border-spacing to all rows except the first and last ones using nth-child, but for some reason, it's not having the desired effect. Can anyone point out what mistake I might be making? table { border: 1px solid blac ...

htmlcsscss-selectorshtml-tableborder-spacing

Setting specific variables in an array with corresponding key-value pairs

I need help with extracting specific columns from a table that has 5 columns. The columns in question are: column1, user_id, column3, column4, and user_exp. Let's say I have the following select query: $mat_sql = mysql_query( "SELECT * FROM users ...

phphtml

What is the best way to eliminate empty spaces from the container?

click here check out this image too Just getting the hang of Bootstrap. The first picture looks good, with the image as the background. But on the second picture, there are margins and a background color showing up. How can I get rid of those margins? Her ...

htmlcssbootstrap-5

Detecting the presence of a file on a local PC using JavaScript

In the process of creating a Django web application, I am exploring methods to determine if a particular application is installed on the user's local machine. One idea I have considered is checking for the existence of a specific folder, such as C:&bs ...

javascripthtmldjangofile

There seems to be an issue with the Angular QuickStart project as it is not functioning properly, showing the error message "(

After following the instructions in this guide for setting up VS2015, I encountered issues when trying to run the "quick start" project or the "tour of heroes" tutorial on Google Chrome. The error message I received can be found here: Angular_QuickStart_Er ...

htmlangulargoogle-chrometypescriptvisual-studio-2015

What is the best way to include scrollbars with bootstrap?

I recently came across this HTML code snippet from a learning website: <!DOCTYPE html> <html lang="en> <head> <meta charset="UTF-8> <title>Example of Bootstrap 3 Simple Tables</title> <link rel="stylesheet" href="htt ...

jqueryhtmltwitter-bootstrap

Customizing the step function of HTML5 input number with jQuery: A guide

Is there a way to modify the step value in HTML5 number inputs for my web application? I would like it to increment and decrement by 100 instead of 1. I attempted the following approach: $("#mynumberinput").keydown(function(e){ if (e.keyCode == 38) / ...

javascriptjqueryhtmlkeydownkeycode

Using JavaScript to browse and filter by category

After spending some time working on a search function, I received some assistance from Tim Down who provided me with a simple code to search for specific text within a page. Now, my goal is to modify the code to enable searching by category. I have struct ...

javascripthtmldom

How can I modify the color of JavaFX text using CSS?

Looking to jazz up my JavaFX application with some custom CSS styling. Managed to link a stylesheet to my app using the following code: //Java code FXMLLoader loader = new FXMLLoader(MainApp.class.getResource("/path/to/fxml")); Scene sce ...

javacssjavafxtextnew-style-class

Finding the nearest value by searching through data attributes using numeric values

How can I target the first div with a data-score value just above a specified user score? The code snippet I have tried doesn't seem to be working. Any suggestions? var userscore = $("#userScore").val(); var next = $("div[data-score >=" + users ...

javascriptjqueryhtml

Guidelines for Naming Data Attribute Values in JavaScript

When it comes to the Data Attribute Value, should one use hyphens or camelCase as a convention? Hyphen Example: <input type="text" name="some_input" data-target="to-grab-input-via-javascript"> Camel Case Example <input type="text" name="some_ ...

javascriptjqueryhtml