How can I modify the appearance of sibling elements when I hover over one?

Here is a code snippet:

<div class="main">
    <a href="" target="_blank">
        a
    </a>

    <a href="" target="_blank">
        b
    </a>

    <a href="" target="_blank">
        c
    </a>

    <a href="" target="_blank">
        d
    </a>
</div>

<style>
.main a {
    background: blue;
    width: 50px;
    height:50px;
    display: inline-block;
    color: #ffffff;
}

.main a:hover {
    
}
</style>

I would like to adjust the opacity of the blue when hovering over each box to .5, resulting in a visual effect similar to this https://i.sstatic.net/9nP6s.png

Can this be achieved using CSS?

htmlcss

Answer №1

Absolutely, it can be done. I've included the necessary style below for you to implement. You can observe it in action on this codepen. This technique involves detecting hover events on both the parent and the individual child elements.

If you intend to add more content within the main section, consider enclosing the a tags within a div, allowing you to target div:hover instead.

<div class="main">
    <a href="" target="_blank">
        a
    </a>

    <a href="" target="_blank">
        b
    </a>

    <a href="" target="_blank">
        c
    </a>

    <a href="" target="_blank">
        d
    </a>
</div>

<style>
.main a {
    background: blue;
    width: 50px;
    height:50px;
    display: inline-block;
    color: #ffffff;
}

.main:hover a {
  opacity: 0.5;
}

.main:hover a:hover {
  opacity: 1;
}
</style>

Answer №2

If the main Element contains only the objects you wish to apply this effect to, here is a suggested solution:

.main:hover a { opacity: 0.5 }

For the specific element being selected:

.main:hover a:hover { opacity: 1}

By implementing these CSS rules, you can achieve the desired visual effect.

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

CSS Float behaving unexpectedly

body { margin: 0; font-family: arial; line-height: 16px; } #topbar { background-color: #600c0c; width: 100%; height: 46px; color: white; margin: 0; } .fixedwidth { width: 1050px; margin: 0 auto; } #logodiv { padding-t ...

htmlcsscss-float

Transmitting data via HTML anchor tags

Is it possible to send POST data using an HTML tag? I'm aware that scripting is usually required, but I've been attempting to achieve this without success. <a class="test" onClick="assign()"><img src='<?php echo $accounts[$i][&a ...

javascripthtmlcakephppostdata

limitation in bootstrap ensures that only one collapse element is open at any

Hey, can someone help me fix this code? I'm trying to make it so that only one element opens at a time, but I can't seem to figure out how. Right now, if I click on two elements, they both open and the other one doesn't close. This is what ...

javascripthtmlbootstrap-4

Play framework fails to apply style attributes correctly

When working with play-framework 2.3.x, I am in the process of creating a form and would like to show/hide it based on a model attribute. Typically, setting the style attribute manually using style = "display: none" and style = "display: block" works fine. ...

htmlcssscalaplayframework

The content beneath the Wordpress sidebar

After reviewing the articles which explained that when the sidebar goes under the content, it is usually due to a missing or extra div causing the sidebar to wrap out of place, or because the width of the content or sidebar is too wide. Despite thoroughly ...

htmlcss

Adjust the size of iCheck jQuery radio buttons

I have implemented the iCheck Plugin for radio buttons in Angular Directive, but I am facing an issue with resizing the radio button to a smaller size. Does anyone have any suggestions or solutions for this? ...

cssangularjsicheck

Steps for Setting the Value of a Dropdown Option Based on its Unique Identifier

<select id=workTypeSelection> <option id="-1">-Select a Work Type-</option> <option id="1">Common</option> <option id="3">Computer Maintenance</option> <option id="5">Facility Maintenance</ ...

javascriptjqueryhtmlselectdropdown

What is the best way to incorporate a CSS transition without any dynamic property changes?

Is there a way to add a transition effect to a header when its size changes without a specified height value in the CSS? The header consists of only text with top and bottom padding, so as the text changes, the height adjusts accordingly. How can I impleme ...

javascripthtmlcsscss-transitions

Can JavaScript be used to adjust the zoom level of a website when the user's display scaling is set above 100%, like at 125% or 150%?

These are the display settings I was referring to... They are always set to 150% on laptops... Is it possible to adjust the website zoom using javascript if the user has display settings scaling above 100%, such as 125% or 150%? ...

javascripthtmlwindows

CSS - enhancing web design with accessible selectors

Hey everyone, I'm really struggling to figure out what's going on with this code. It's a simple CSS issue but for some reason the browser (FF) is completely ignoring the last CSS selection code. Here's the HTML snippet: <div id="c ...

csscss-selectors

The options in the drop-down menu appear to be stuck and remain in place

Can someone with expertise lend me a hand? I've been racking my brain over this issue, and while I feel like I'm on the right track, I just can't seem to make my sub-sub menu items drop down to the right on hover. I suspect there might be c ...

htmlcssdrop-down-menu

Blank email messages in outlook.com, microsoft exchange, and hotmail.com

After styling an email and testing it, everything seemed to work fine except in Outlook.com, Microsoft Exchange, and Hotmail. For some reason, Exchange strips all the code used (tables, tr & td tags) no matter what I do. Is there a workaround for this ...

htmlcsswordpressoutlookhtml-email

Determine the overall cost based on varying percentage increases for each step

I am currently working on developing a price estimation calculator. Here is the breakdown: For 1000 MTU, the price will be 0.035, resulting in a total of 35. For 2000 MTU, the price will be 0.034, making the total 67. For 3000 MTU, the price will be 0.03 ...

javascripthtmljquerycss

Having trouble with my PDO insert query functionality

I've been trying to input the data from my form into the database, but unfortunately, my current code doesn't seem to be working. I followed some tutorials on YouTube for this particular project, and despite following them closely, the data I ent ...

phphtmlpdo

Adjusting the Stripe Button to Utilize a Unique Button Class

I have a stripe button on my website and I want to add my custom class to it. I discovered that manually creating the CSS for it can work, but I prefer to maintain consistency across all buttons on my site by using my custom class. No matter what I attemp ...

javascriptjquerycssstripe-payments

How can I use jQuery to slide up and slide down divs that share the same class?

Currently, I am working on creating a single-page checkout form. The challenge I am facing involves sliding up and down various divs with the same class name but different contents. To demonstrate this issue, I have prepared a sample in JSFiddle: http:// ...

jquerycss

Retrieve the value from another select element

Is there a way to create a function in pure JavaScript that changes the selected options in two select tags based on each other? For example, if I choose a French word in one select tag, the English equivalent automatically changes in the other select tag ...

javascripthtmlselect

How can I make a bootstrap container maximize the available viewport space?

I've come across several similar posts, but none seem to address my particular dilemma. My challenge lies in presenting a table at the end of a bootstrap grid: <div class="container-fluid"> <!-- Various rows with different size ...

htmlcssbootstrap-4blazor

Tips on utilizing CSS for text transformations

I'm currently working on a web app where I am using the CSS "transform" property to rotate text by 90 degrees on large and desktop screens. However, I would like the rotation angle to automatically change to 0 degrees if the screen size is small. Can ...

htmlcss

HTML Techniques: Flipping the Script - Writing Characters from Right to Left

In order to showcase the temperature in degrees Celsius, I have implemented a placement technique using absolute positioning. Consequently, the °C symbol will persist in its designated spot. To achieve the desired presentation, the text should be displaye ...

htmlcss