Make a portion of the title come alive on hover

Looking to add animation to a title that consists of two parts: "HARD" and "WARE", with the second part having a more transparent color.

When hovering over the "HARD" word, the colors reverse correctly. However, when hovering over the "WARE" word, only one color changes. I've attempted to use combinators selectors, but there isn't a selector for "previous siblings".

body {
  background-color: #171717;
}

#title {
  font-size: 10vmax;
  font-family: 'Open Sans', Calibri;
}

#hard {
    color: rgba(255, 255, 255, 1);
    transition: all 0.3s ease-in-out;
}

#hard:hover {
    color: rgba(255, 255, 255, 0.18);
}

#hard:hover + #ware {
    color: rgba(255, 255, 255, 1);
}

#ware {
    color: rgba(255, 255, 255, 0.18);
    transition: all 0.3s ease-in-out;
}

#ware:hover {
    color: rgba(255, 255, 255, 1);
}

#title span:last-child:hover + #title > span:first-child {
    color: rgba(255, 255, 255, 0.18);
}
<div id="title">
  <span id="hard">HARD</span>
  <span id="ware">WARE</span>
</div>

htmlcsscss-selectors

Answer №1

Below is a creative solution that leverages the :hover state of the parent element using combined selectors with the first and last child:

body {
  background-color: #171717;
}

#title {
  font-size: 10vmax;
  font-family: 'Open Sans', Calibri;
}

#hard {
  color: rgba(255, 255, 255, 1);
  transition: all 0.3s ease-in-out;
}

#ware {
  color: rgba(255, 255, 255, 0.18);
  transition: all 0.3s ease-in-out;
}

#title:hover span:first-child {
  color: rgba(255, 255, 255, 0.18);
}

#title:hover span:last-child {
  color: rgba(255, 255, 255, 1);
}
<div id="title">
  <span id="hard">HARD</span>
  <span id="ware">WARE</span>
</div>

Additionally, instead of targeting the first and last child elements, you can also use the IDs in the selectors:

body {
  background-color: #171717;
}

#title {
  font-size: 10vmax;
  font-family: 'Open Sans', Calibri;
}

#hard {
  color: rgba(255, 255, 255, 1);
  transition: all 0.3s ease-in-out;
}

#ware {
  color: rgba(255, 255, 255, 0.18);
  transition: all 0.3s ease-in-out;
}

#title:hover #hard {
  color: rgba(255, 255, 255, 0.18);
}

#title:hover #ware {
  color: rgba(255, 255, 255, 1);
}
<div id="title">
  <span id="hard">HARD</span>
  <span id="ware">WARE</span>
</div>

Answer №2

you need to make sure the opacity changes for "ware" when hovered, but other than that, everything looks good


#hard:hover {
    color: rgba(255, 255, 255, 0.18);
}

#hard:hover + #ware {
    color: rgba(255, 255, 255, 1);
}

#ware {
    color: rgba(255, 255, 255, 0.18);
    transition: all 0.3s ease-in-out;
}

#ware:hover {
  color: rgba(255, 255, 255, 0.18);
}

#ware:hover + #hard{
    color: rgba(255, 255, 255, 1);
    
}

this is the corrected code for you

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

Is there a way to keep the middle div at a fixed width while the left and right divs adjust their size as the screen gets smaller in a row with 3 divs?

Having 3 divs in a single row can be quite challenging. <div id="left"></div> <div id="middle"></div> <div id="right"></div> This layout requires the middle div to have a fixed width, while the left and right divs adju ...

csshtml

Displaying a loading spinner image as PHP script runs

Hey there! I've been experimenting with using a script to show a loading bar while my PHP code is running. I followed the instructions on this website, but even after following the exact steps, my loading bar still isn't showing up. Any suggestio ...

javascriptphpjquerycss

Content sliding to the left due to modal prompt

I've searched through various questions and answers but haven't been able to resolve this issue. There's a modal on my page that is causing the content to shift slightly to the left. I've created a sample fiddle, although it doesn&apo ...

javascripthtmlcssbootstrap-4bootstrap-modal

Click on a new tab to enable printing options for the page

I am looking to enhance the print page functionality on my website. Currently, when the print icon in the footer is clicked, it opens the printer dialog box directly. I would like to change this behavior so that when the Print icon is clicked, the contents ...

javascript.nethtmlcssprinting

Is there a way in Jquery to retrieve the id of the clicked element and modify its name?

I am using a drag-and-drop website builder that utilizes HTML blocks, each with a unique ID. After dropping the blocks onto the canvas, I want to create a navigation menu that links to the IDs of each block. How can I retrieve the current ID of the block I ...

javascriptjqueryhtml

Troubleshooting a Problem with the Horizontal Scrollbar in Dynamic jqGrid

Currently, I am working on an ASP.net MVC project where I have implemented both dynamic and static jq grids. However, I am encountering an issue with the horizontal scroll bar in my application. To address this problem, I attempted to modify the overflow ...

javascriptjquerycssasp.net-mvc-4jqgrid

Ways to showcase JSON data with jQuery

My code displays movie data from a JSON variable and populates it on a dropdown list based on the selected city. I aim to include show timings along with other details from the JSON content. The code snippet is as follows: $(document).ready(function() ...

javascriptjqueryhtmljson

Acquiring div elements from a collection of divs using selenium in Java

Currently, I am attempting to retrieve a list of all elements using the XPath below. Unfortunately, no matter what I try (class, xpath, etc.), I'm always getting a result size of 1. My objective is to search for records and then loop through them, but ...

htmllistselenium-webdriver

When the jQuery Div is moved to the right, it gradually shrinks in size, yet remains unchanged when

I have been making updates to this page, which you can view here. When you select "Let's Get Started" and then proceed with the right arrows, the divs smoothly move to the left without shrinking. However, when clicking on the back or left arrows, the ...

javascriptjqueryhtmlcss

It is not permitted to incorporate the navbar.html file into any other modules

As someone new to web development, I have been facing challenges while working with Django This is the code for my project's modules. {% include 'navbar.html' %} <h1>projects template</h1> <p>Lorem Ipsum is simply dummy ...

pythonhtmldjangowebnavbar

mobile screens causing bootstrap columns to overlap

The code I am working with is shown below: <div class="container"> <div class="col-md-3 calendar"> </div> <div class="col-md-9"> <button></button> (more buttons...) </div> < ...

htmlcssbootstrap-4

Retain the chosen values even after submitting the form

Consider the following form: <form method="get" action=""> <select name="name"> <option value="a">a</option> <option value="b">b</option> </select> <select name="location"> <opt ...

phpjavascripthtmlwordpressforms

Excessive CPU/GPU usage caused by CSS transition animations

I am currently working on a small element on my website that involves a random size change in one of the DOM elements. const theDiv = document.getElementById("the-div"); function animate(){ const value = Math.floor(Math.random() * 200); theDiv.sty ...

htmlcssperformancecss-transitions

challenges surrounding the use of getElementByTagName

Within my webpage, I have implemented two select elements, both containing multiple options. However, I am facing an issue where I can only access the options from the first select box using getElementByTagName("options"), and unable to retrieve the option ...

javascriptjqueryhtmltagsgetelementsbytagname

What is the method for configuring input in a session without having to submit it?

I am encountering a major issue with my PHP MVC pattern website. On one page, I did not implement a "POST" submit method and now I am facing difficulties in passing quantity to the products/order page. If I use a Submit button, the next page does not funct ...

javascriptphpjqueryhtml

Explanation: The information box does not appear when the mouse hovers over it

Welcome to the gallery showcasing a unique calendar design with tooltip functionality. This calendar features a special hover effect for New Year's Day on January 1st, displaying a tooltip text upon interaction. Feel free to explore the code below to ...

htmlcsshovertooltip

What strategies can we implement to reduce the gutter width in Bootstrap 3?

Is there a way to decrease the gutter-width in Bootstrap 3? Since Bootstrap uses a 12-grids system, using col-sm-* creates a gap between elements of around 30px (15px on each side of the grid-column). However, my theme requires less space between columns ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Is it possible to call componentDidMount() multiple times in React?

I am in the process of converting an HTML API to ReactJS. The original HTML API is as follows: <script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=3199e8f198aff9d5aff73000faae6608"></script> <script> var mapContainer = document.getE ...

javascripthtmlreactjsgatsby

What is the best way to align a single item to the right on the navbar in Bootstrap 5.3 (v5.3.0-alpha1)?

Attempting to position a dropdown link to the right in my Bootstrap 5.3 navbar proved to be challenging. The method that worked with Bootstrap 3, using navbar-right, and with Bootstrap 4, possibly ml-auto, did not work with Bootstrap 5 beta which uses me-a ...

htmltwitter-bootstrapbootstrap-5

Update the text within a textarea by clicking with the power of jquery

Is there a way to clear the content of my textarea on click? Below is the code snippet: http://jsfiddle.net/QMfyP/ <textarea name="adventage" style="width:400px; border-radius: 3px; border-left: 4px solid #6C3" id="adventage" cols="45" rows="5">Sh ...

jqueryhtmlcss