Enhance your website with a customizable language selection feature using HTML and CSS

Currently, I am in the process of creating a dynamic language selection feature using HTML and CSS. Initially, this is what it looks like:

https://i.stack.imgur.com/bhnaA.png

Upon hovering over it, this is the effect I want to achieve:

https://i.stack.imgur.com/phoWN.png

This is the HTML code that I have used:

.wrapper {
  margin: 20px;
  background-color: lightgray;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 33px;
}

.icon {
  padding: 5px 10px;
  display: none;
}

.icon.active-icon {
  display: inline-block;
}

.icon:hover {
  cursor: pointer;
  display: inline-block;
}
<div class="wrapper">
  <img class="icon active-icon" src="./ua.svg" alt="" />
  <img class="icon" src="./ru.svg" alt="" />
  <img class="icon" src="./en.svg" alt="" />
</div>

However, I am facing an issue where the 'display' property does not change on hover, and the initially hidden elements do not appear as intended.

htmlcss

Answer №1

When hovering over the icon, only the hovered element of the .icon class is affected, not all elements. To achieve this effect, apply the :hover pseudo-class to the .wrapper class and set the display property to inline-block for the .icon class when hovering over the wrapper.

.wrapper {
  margin: 20px;
  background-color: lightgray;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 33px;
}

.icon {
  padding: 5px 10px;
  display: none;
}

.icon.active-icon {
  display: inline-block;
}

.wrapper:hover .icon {
  cursor: pointer;
  display: inline-block;
}
<div class="wrapper">
  <img class="icon active-icon" src="https://via.placeholder.com/20/FF0000/000000?text=1" alt="" />
  <img class="icon" src="https://via.placeholder.com/20/00FF00/000000?text=2" alt="" />
  <img class="icon" src="https://via.placeholder.com/20/0000FF/0000000?text=3" alt="" />
</div>

For more detailed information on this topic, visit: How to affect other elements when one element is hovered

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 it possible to use React and Material-UI to make a paper element extend to full width beyond the boundaries of a Container?

Assuming I have the following code snippet: <Container maxWidth='lg'> <Grid container spacing={3}> <Grid item xs={12} md={6} > <Image src="/img/undraw_programming_2svr.png" color='transparent' ...

cssreactjsmaterial-ui

How can one retrieve the 'alt' attribute text from an image tag on a webpage using the JSOUP library in an Android application?

Extracting the 'alt' text from an 'img' tag in Android after clicking a button is causing issues. The attempted code is not working as expected. Here is the snippet of the code that was used: Document doc = Jsoup.connect(url).get(); ...

javaandroidhtmlweb-scrapingjsoup

What could be causing the API link to not update properly when using Angular binding within the ngOnInit method?

Hi there, I'm currently working on binding some data using onclick events. I am able to confirm that the data binding is functioning properly as I have included interpolation in the HTML to display the updated value. However, my challenge lies in upd ...

javascripthtmlangulartypescript

Placing a box in the center of its parent container using CSS positioning

Check out this code snippet : HTML <div class="app-cont"> <div class="app-head"> Additional Comments : </div> <div class="app-main"> balallalalalallalalalala <br/> jaslnflkasnlsnlk ...

css

Aligning HTML headers in a horizontal manner

Can anyone help me out here? I have a div containing 4 elements that are currently stacked on top of each other. I want them to be aligned horizontally instead. The div's ID is #ninesixty. Thank you in advance! HTML <header> <div id="ni ...

csshtmlweb

As you scroll, the opacity gradually increases, creating a dynamic visual

Struggling to replicate a feature on a website where images gain opacity as you scroll down? Check out this site for reference: . While my current code somewhat achieves this effect, I'm having trouble figuring out how to apply a darker opacity gradua ...

javascriptjquerycssif-statementscroll

Can you use "or" or "not" syntax with CSS input type selectors?

In the world of programming, if they actually exist, Suppose I have created an HTML form with the following input fields: <input type="text" /> <input type="password" /> <input type="checkbox" /> I wish to style all input fields that a ...

htmlcsscss-selectors

Creating a custom Vue.js component for specific table cells within a table row - here's how!

My challenge is having related and neighboring table columns grouped within the same component in Vue.js. However, I'm facing a limitation with the template system where only one tag can be directly placed inside <template>. Typically, this wrap ...

htmltemplatesvue.jshtml-table

JavaScript is not designed to run a second time

Currently, I have a script set up using $(document).ready(). It works perfectly upon initial loading. However, I also need this script to execute whenever the user changes an HTML select control. Ideally, upon page load, I want the filter and sort functio ...

javascriptjqueryhtml

Designing Buttons and Titles for the Login Page

I'm currently working on developing a straightforward login page in react native and I've encountered some difficulties with styling. Does anyone have tips on how to center the text on the button? Also, is there a way to move the INSTARIDE text ...

javascriptcssreactjsreact-native

Styling conditionally with Dash Bootstrap using an IF statement

I am looking to implement a feature where text in a column is displayed in two different colors based on its value, using Dash bootstrap and various HTML components. For example, consider the following table: Value Yes No Yes Yes No The goal is to displa ...

pythonhtmlcssbootstrap-5

Guide to creating a nested list using the jQuery :header selector

Here is the structure of my html: <h1 id="header1">H1</h1> <p>Lorem ipsum</p> <h2 id="header2">H2</h2> <p>lorem ipsum</p> <h2 id="header3">H2</h2> <p>lorem upsum</p ...

javascriptjqueryhtmlcssnested

Creating a Facebook link widget similar to Grooveshark: A Step-by-Step Guide

Recently, I shared a Grooveshark link on Facebook (like http://grooveshark.com/s/Toothpaste+Kisses/3gGocy?src=5) and to my surprise, the link appeared to be normal at first. However, once clicked, it magically transformed into a Flash widget like this. The ...

htmlfacebookflashfacebook-opengraphgrooveshark

Choose Selectize.js to auto-populate inputs

I am currently using selectize.js for my project: $("#abc").selectize({ valueField: 'name', labelField: 'name', searchField: ['name'], plugins: ['remove_button'], createOnBlur: true, ...

javascriptjqueryhtmlselectize.js

What are some strategies to stop a jQuery UI button created with a link from inheriting the link's text color?

I recently came across a recommendation to create a jQuery button on top of a link for redirect purposes: <a href="/search" class="button">My link</> $(".button").button(); However, I noticed that if the button class has a red foreground colo ...

jquerycssjquery-ui

Adjust the placement of a div within another div based on various screen sizes dynamically

Currently, I am working on an Ionic 2 app where the user is required to select specific points on the screen. These coordinates will then be utilized on another screen with a different size. My initial attempt at using rule of three/cross multiplication pr ...

javascripthtmlcssangularionic2

How can I close the colorbox and open a new regular window when clicking a hyperlink?

Hey there, I'm currently facing an issue with closing a colorbox when clicking "Click here to return to our website" and opening a regular browser window instead. You can check out the problem on this page: On the left navigation bar at the bottom i ...

jqueryhtmlcolorbox

When triggered by a click, the function gradually fades in and out. It superimposes one image on top of another, but unfortunately, the sizes

Due to different screen sizes, the image does not appear on top of another image exactly. It seems like a new function is needed. One that does not overlap with another image (by clicking the function for a few seconds), but rather replaces it for those fe ...

javascriptcssbuttononclickclick

When submitting a form with the jQueryForm plugin, take action on the form by selecting it with `$(this)`

I have a situation where I have multiple forms on one page and am utilizing the jQuery Form plugin to manage them without having to reload the entire page. The issue arises when I need some sort of visual feedback to indicate whether the form submission wa ...

javascriptjqueryhtmlforms

Nuxt.js implemented with Auth using jwt refresh tokens

I've implemented the Auth library in my Vue/Nuxt project and have successfully set up JWT Authentication. However, I'm encountering an issue with the refresh token. The refreshToken cookie is consistently being set to null: Furthermore, when at ...

javascripthtmlnode.jsvue.jsnuxt.js