Color Swap Hover Animation

I need help implementing a color switch on hover, but I'm facing an issue where the text (within a span) is within a list item. Currently, the color changes only when hovering over the text itself, but I want it to change when hovering over the entire list item element.

span {
color: orange;
transition: all 0.5s ease-in-out;
font-weight: 200;
}

ul {
text-align: center;
padding-top: 20px; 
}

li {
list-style: none;
display: inline-flex;
padding: 10px 10px;
font-size: 30px;
transition: all 0.5s ease-in-out;
border: 1px solid black;
font-weight: 300;
border-right: 1px;
border-left: 1px;
}

#ot {
border-top: 1px solid orange;
border-bottom: 1px;
border-left: 1px solid orange;
}

#ob {
border-bottom: 1px solid black;
border-top: 1px;
border-right: 1px solid black;
color: 
}

#black:hover {
color: black;
}

#ot:hover {
border-top: 1px solid black;
border-left: 1px solid black;
color: orange;
}

#ob:hover {
border-bottom: 1px solid orange;
border-right: 1px solid orange;
color: orange;
}
<ul>
  <li id="ot">high <span id="black">Park</span></li>
  <li id="ob">the <span id="black">Beach</span></li>
</ul>

htmlcss

Answer №1

You can style the span element when hovering over #ob, #ot. Here's an example:

#ob:hover #black {
  color: black;
}

#ot:hover #black {
  color: black;
}

Take a look at the code snippet below:

span {
color: orange;
transition: all 0.5s ease-in-out;
font-weight: 200;
}

ul {
text-align: center;
padding-top: 20px;
}

li {
list-style: none;
display: inline-flex;
padding: 10px 10px;
font-size: 30px;
transition: all 0.5s ease-in-out;
border: 1px solid black;
font-weight: 300;
border-right: 1px;
border-left: 1px;
}

#ot {
border-top: 1px solid orange;
border-bottom: 1px;
border-left: 1px solid orange;
}

#ob {
border-bottom: 1px solid black;
border-top: 1px;
border-right: 1px solid black;
color: 
}

#black:hover {
color: black;
}

#ot:hover {
border-top: 1px solid black;
border-left: 1px solid black;
color: orange;
}

#ob:hover {
border-bottom: 1px solid orange;
border-right: 1px solid orange;
color: orange;
}

#ob:hover #black {
  color: black;
}

#ot:hover #black {
  color: black;
}
<ul>
  <li id="ot">high <span id="black">Park</span></li>
  <li id="ob">The <span id="black">Beach</span></li>
</ul>

I hope this helps you achieve your desired outcome.

Answer №2

Is this the concept you had in mind?

span {
color: orange;
transition: all 0.5s ease-in-out;
font-weight: 200;
}

ul {
text-align: center;
padding-top: 20px; ;
}

li {
list-style: none;
display: inline-flex;
padding: 10px 10px;
font-size: 30px;
transition: all 0.5s ease-in-out;
border: 1px solid black;
font-weight: 300;
border-right: 1px;
border-left: 1px;
}

#ot {
border-top: 1px solid orange;
border-bottom: 1px;
border-left: 1px solid orange;
}

#ob {
border-bottom: 1px solid black;
border-top: 1px;
border-right: 1px solid black;
color: 
}

#ot:hover #black,
#ob:hover #black {
color: black;
}

#ot:hover {
border-top: 1px solid black;
border-left: 1px solid black;
color: orange;
}

#ob:hover {
border-bottom: 1px solid orange;
border-right: 1px solid orange;
color: orange;
}
<ul>
  <li id="ot">high <span id="black">Park</span></li>
  <li id="ob">the <span id="black">Beach</span></li>
</ul>

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

Developing a division with an image source based on the selection of a checkbox

My goal is to develop a "change function" that generates a new div for each checked checkbox selection and removes the div when the checkbox is unchecked. These new divs should also display the img src of the selected checkbox. Currently, my JavaScript c ...

javascriptjqueryhtml

In Javascript, the color can be changed by clicking on an object, and the color

Looking for help with my current HTML code: <li><a href="index.php" id="1" onclick="document.getElementById('1').style.background = '#8B4513';">Weblog</a></li> The color changes while clicking, but when the lin ...

javascriptcsscolorsbackground-color

Navigate to the AngularJS documentation and locate the section on monitoring data changes after a dropdown selection

Just starting out with AngularJS and Stack Overflow, so I hope I am asking this question correctly. I am working on a single-page application with editable text inputs. Two select drop-downs are used to control which data is displayed - one for time perio ...

javascripthtmlangularjsdrop-down-menumodal-dialog

What initiates the call for CSS?

During his instructional video, the creator visits the CodeIgniter website at . When he initially arrives at the site (at 1:32), it appears somewhat odd, almost as if it lacks CSS styling. However, after refreshing the page (1:37), it displays properly. ...

javascriptcss

Simplifying HTML/CSS tasks with effective tools

Looking to create a user-friendly web interface for company employees without spending too much time on design and markup. The end result doesn't have to be fancy, just clean HTML/CSS. Any suggestions for tools or techniques to streamline this proces ...

htmlcssinterface

Extracting the contents of a Span tag that lacks a class attribute and is not present in every element

I am currently utilizing Selenium in Python to scrape a review page on the web. Specifically, I am interested in extracting the rating of each review (for example, extracting 7 from 7/10 in a review). The structure of the HTML element looks like this: ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

Show various shapes based on the values retrieved from MYSQL database

I am just starting to learn MYSQL and PHP, and I am currently working on creating a Course registration application using xampp. This application is designed to collect user data and store it in a MYSQL database. Within my MYSQL table, I have user details ...

phpmysqlhtml

Cannot add padding to the DIV element

Here is some HTML and CSS code that I've provided. .x{ border-bottom: 1px solid #000; } .y { border-bottom: 1px solid #000; } .z li{ display: inline; padding-top: 50px; } <div class="x"> <br> <br> <b ...

htmlcss

Looking for an Angular Material component that displays a list of attributes?

I am trying to create a dynamic list of properties in Angular using Material Design that adjusts for different screen sizes. For example, something similar to this design: https://i.stack.imgur.com/EUsmV.png If the screen size decreases, the labels shou ...

cssangularangular-materialmaterial-designkey-value

Switching between different CSS files based on the URL using jQuery or another method

Is it feasible to apply specific styles based on the ID or load various CSS files depending on the URL you are visiting? For example: <script> if(location.href == 'http://jpftest2.tumblr.com/about'){ document.write('<style type= ...

javascriptjqueryhtmlcss

Transform spaces into %20 from an HTML input field by utilizing JavaScript or jQuery

Hi there, I'm encountering an issue with the input field on my website where users can enter search terms. I am currently extracting the user's input value and adding it to a URL string. jQuery("#searchButton").click(function(){ var simpl ...

javascriptjqueryhtml

How to Align Navigation Searchbar in Center When Bootstrap is Collapsed

I am attempting to center my search bar when it is collapsed. Currently, it appears like this: As you can see, the links are centered, but not the search bar. This is the existing HTML structure: <!-- Navigation Bar Start --> <div class ...

htmlcsstwitter-bootstrapnavigation

Can one customize the background color of a segment in a radar chart using Chart.js?

Could I customize the color of the sectors in my radar chart to resemble this specific image? https://i.stack.imgur.com/U8RAb.png Is it feasible to achieve this using Chart.js? Alternatively, are there other chart libraries that have this capability? It ...

jquerycssangularjschart.js

Having trouble with jQuery UI draggable when using jQueryUI version 1.12.1?

Currently, I am diving into the world of jQuery UI. However, I am facing an issue with dragging the boxes that I have created using a combination of HTML and CSS. My setup includes HTML5 and CSS3 alongside jQuery version 1.12.1. Any suggestions or help wou ...

javascriptjqueryhtmlcssjquery-ui

REST, hypertext, and clients other than web browsers

I'm struggling to understand how a REST API can be both hypertext driven, as explained in this article, and still be machine readable. Let's say I create an API where one endpoint lists the contents of a collection. GET /api/companies/ When the ...

htmljsonhttprest

A fragmented rendering of a gallery featuring a CSS dropdown menu

Hey there! I'm a newbie coder seeking some assistance. Recently, I stumbled upon a tutorial online that taught me how to create a drop-down menu. However, whenever I hover over "Gallery" on my website, things go haywire and the layout gets all messed ...

htmlcssuinavigationbar

Trouble with HTML2PDF.js - download not being initiated

Currently, I am utilizing html2pdf.js in my project by following this tutorial: https://github.com/eKoopmans/html2pdf.js However, I've encountered an issue where despite implementing everything as instructed, the download prompt for the specified div ...

javascripthtmlcss

indicating the vertical size of a paragraph

Is there a way to set the specific height for the <p> tag? ...

htmlcss

ui-grid row size set to automatically adjust using rowHeight : 'auto'

Has anyone else experienced this strange behavior with ui-grid? When I set the rowHeight to auto, each cell in the same row ends up with different heights. One of the cells contains multiline data, which seems to be causing issues for ui-grid. I've ev ...

javascriptcssangularjsng-gridangular-ui-grid

What is the meaning of a "hook" in the world of HTML?

During a recent interview, a developer asked me about the "hooks" Angular uses with HTML. I admitted that I was not familiar with the term "hook," despite my extensive experience in web development over the past two decades. While I have some ideas of what ...

htmlangular