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

Having trouble loading external CSS in HTML?

I have been attempting to load an external CSS file into my current HTML file without success. I have provided images showcasing the code: View the code here See the output here Currently, I am working on Windows and using Aptana Studio 3 as my IDE. ...

htmlcss

Assigning a class to a header upon loading the page from various sections at random

After scrolling, I used JavaScript to add a class to <header>. Here is the code snippet: $(window).scroll(function(){ var top = $(window).scrollTop(); if(top>=1){ $("header").addClass('bg-header'); } else ...

javascriptjquerycss

Following the modification of the Context root, the JSP page is no longer functioning as expected

Recently, I developed a JSP page within the webapp that utilizes jquery, CSS, and Angular JS. The files jquery-1.12.0.js, angular.min.js, and TableCSSCode.css are all located in the same directory as the JSP page. Initially, my application context was set ...

jquerycssangularjsjspweb

Combining the jquery-UI slider functionality with the canvas rotate() method

Is there a way to rotate an image using html2canvas plugin and jQuery UI slider? I am new to programming and need some guidance on how to achieve this feature. Here is my current progress: http://jsfiddle.net/davadi/3d3wbpt7/3/ ` $("#slider").slider({ ...

javascriptcssjquery-uihtml2canvas

The SQLite database accessed through Flask exclusively returns variables, rather than actual data

I have a custom flask application that interacts with a sqlite database: @app.route('/<subject_id>') def subject_id_lookup(subject_id): entries = query_db('select visitdt, cvnotes from exam where id = ?', ...

pythonhtmlsqliteflask

Enhancing modal interactions with modal pop-ups

I've been experimenting with different modal effects for a modal popup, following the examples on this site: https://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/ Here is my code snippet: <div class="md-modal md-effect-1" id="modal- ...

cssasp.netmodalpopup

Execute jquery commands after the function has finished

I am trying to implement the code below: $(":file").change(function () { if (this.files && this.files[0]) { console.log(this.files[0]); var reader = new FileReader(); ...

javascriptjqueryhtml

SQL statement not recognized

My current project involves conducting an experiment using a pre-coded script accessible through the link here. In this experiment, I'm utilizing xampp as my web server with mysql. However, when I attempt to run the authentication page containing the ...

phphtml

Tips on creating a slow and gradual border animation that unfolds smoothly

I am looking to create an animation effect on a border, gradually revealing it like in this Codepen example. However, my specific requirements are: The previous line should not be removed, but rather shown along with the new border. The border color ...

javascripthtmlcss

Identify Pressed Shift Key Direction - Leveraging JQuery

I am currently working on a web application that requires users to enter capital letters. However, I want to restrict them from using the right shift key for certain keys like a, s, d, f and the left shift key for h, j, k, l in order to detect whether they ...

javascriptjqueryhtml

Centering "Label - Value" without tables in web design

It's common to have multiple labels (such as name, age, color) and a corresponding value for each one. One way to ensure that the values (for example Steve, 19, Red) all start in the same horizontal position is by organizing them in a 2 column, 3 row ...

htmlcsstabular

Is there a way for me to extend an absolute div to the full width of its grandparent when it is within an absolute parent div?

Here is a structured example of my HTML and CSS: <div class="grandparent"> <div class="row">...</div> <div class="absolute-parent"> <div class="absolute-child">...</div> ...

javascripthtmlcsscss-position

Struggling to properly align a div on top of an image

view image description herei need assistance with centering the div over the background image. I attempted to use relative positioning for the container and absolute positioning for the elements, but it did not yield the desired result. The code snippet be ...

htmlcss

Adjust the width of your table content to perfectly fit within the designated width by utilizing the CSS property "table width:

Example of a table <table> <tr> <td>Name</td> <td>John</td> <td>Age</td> <td>25</td> <td>Job Title</td> <td>Software Engineer ...

javascriptjqueryhtmlcss

Removing or hiding elements using jQuery

My HTML code includes a select tag, and when the value changes, I want to retrieve data from the database based on this new value. The data is then displayed in a new div. This new div contains a close sign that should hide the div when clicked by the user ...

jqueryhtml

The table's width exceeds the appropriate size

Take a look at the code snippet below <%-- Document : index Created on : Feb 7, 2014, 1:03:15 PM --%> <%@page import="java.util.Map"%> <%@page import="java.util.Iterator"%> <%@page import="analyzer.DataHolder"%> <%@p ...

javahtmlcssjsp

Steps for Embedding an HTML Page into a Tab using jQuery

Within the tab labeled class=plots-tabs-heatmap, I am attempting to insert a new page using the code below. However, instead of seeing tmpdata/page2.html displayed on the tab, nothing appears. $('#plots-tabs-heatmap').html("tmpdata/page2.html"); ...

jqueryhtmltabs

The class name feature on the Drawer component is malfunctioning

React and material-ui are my tools of choice, but I've hit a roadblock. I'm attempting to define some custom CSS behavior for the drawer component, using the className property as recommended. However, despite following the instructions, it' ...

cssreactjsmaterial-ui

Running of code in <script> tag

At what point does the code inside script tags start executing? Does it happen in order? <html> <head> <title>Canvas tutorial</title> <script type="text/javascript"> function draw(){ var canvas = document.getElementById ...

javascripthtml

Modify the state of each individual button

I recently came across a cool implementation using clicks and jQuery fade effects to show a div when a button is clicked and then change the state of the button. Check it out here: http://jsfiddle.net/ttj9J/5/ HTML <a class="link" href="#" data-rel="c ...

jqueryhtmlcss