Hover over flags with stylish borders

Hey there! I've got myself 3 flags (Italian, German, English) in order to switch the language for my entire website in the future. How can I create a border hover effect that will also work with Internet Explorer?

Here is the CSS code:

.miniflags {
    float: right;
    margin: 5px 20px;
    padding-right: 10px;
}

And here is the HTML code:

<div id="bandiere">
    <a><img src="ita.png" class="miniflags" /></a>
    <a><img src="ger.png" class="miniflags" /></a>
    <a><img src="eng.png" class="miniflags" /></a>
</div>

Thanks for your assistance!

Alex

htmlcss

Answer №1

insert

.miniflags img:hover {
    border: 1px solid #000;
}

or 

.miniflags a:hover {
    border: 1px solid #000;
}

into your stylesheet

I am confident that the second option (a:hover) will be more effective

Answer №2

By adding the miniflags class to the <a> element, you can enable the functionality of the :hover pseudoselector.

The use of the miniflags class may not be essential in this case. It is important to note that the :hover effect is only supported for links in older versions of Internet Explorer, so it should be applied to the <a> tags instead of the <img>.

<div id="flags">
    <a><img src="usa.png" /></a>
    <a><img src="france.png" /></a>
    <a><img src="japan.png" /></a>
</div>

<style type="text/css">
    #flags img {
        float: right;
        margin: 5px 20px;
        padding-right: 10px;
    }

    #flags a:hover, #flags a:focus {
        border: 1px solid blue;
    }
</style>

Answer №3

In older versions of Internet Explorer (up to version 6 if I remember correctly), hover effects were only allowed for links. Therefore, you would need to apply the :hover style to the a element instead of the image itself. Additionally, the <a> tag must have a valid href attribute in order for this to function properly.

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

Issue with URL redirection and reloading in Safari and IE browsers

My current method for redirecting to the Item page and performing a full page reload works well in most browsers, but unfortunately not in Safari and IE. In those two browsers, the current page is reloaded instead. Does anyone have any suggestions for an ...

javascripthtmlangularjshttp-redirectcross-browser

The height of the window in Chrome on android is not being properly reset when the address bar

It appears that Chrome on Android is not resetting the window height when the address bar is hiding, unlike other browsers. I have a function that returns true when you have scrolled close to the bottom of the page. function isBottom() { return docume ...

javascriptandroidhtmlgoogle-chrome

Steps to making an overlapping sidebar with Bootstrap column

I'm trying to set up a sidebar in Bootstrap that overlaps with a column. The goal is for the sidebar to appear when a button is clicked and disappear when the close button x is clicked. Despite using a Bootstrap row and column layout, I encountered is ...

javascriptjqueryhtmlcssbootstrap-4

Change the color of the text to be the opposite of the background

I'm facing a challenge while creating a website for my friend. The background of the site is a moving image, and I want the font color of the main title to be the opposite of it on each frame. While I know this may require CSS, I am unsure of how to ...

htmlcss

Ways of accessing an array within an if statement

I have a dashboard with admin privileges for my application. In this dashboard, the admin can select a user from a dropdown list. Once a user is selected, I make an AJAX call to retrieve the user's data and store it in a variable named $result. Howeve ...

javascriptphphtmlajaxscope

Arranging elements within distinct div containers

Utilizing Bootstrap 4, I crafted a card-deck containing two cards. Despite the equal height of both cards, the alignment of elements is affected by varying text lengths. <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min ...

htmlcsstwitter-bootstrapbootstrap-4

Stop the WebGL Three.js container from capturing scroll events

I am working on a full-screen three.js application which serves as the background and I am trying to add overlaid text that can be scrolled. However, my issue arises from the fact that the three.js WebGL container intercepts all scroll events and prevents ...

javascriptcssdomthree.js

Adjusting the positioning of two elements inside a container

Contained within the #search-bar div is a clickable image and an h1 element (unfortunately, I am unsure where to place the relevant image.. my apologies). My goal was to separate them as shown. I'm curious if there might be a simpler and more concise ...

htmlcss

The Material UI button feature neglects to account for custom CSS styles when attempting to override the default settings

Utilizing a custom bootstrap css styles in my react app, I am seeking to enhance the default material ui components with the bootstrap styles. import React, {useState} from 'react'; import 'cg-bootstrap/core/build/cg-bootstrap-standard.css&a ...

javascriptcssreactjsbootstrap-4material-ui

How can you use Flexbox to vertically center the content of a list item?

Here is a simple list example that I have created: ul{background:wheat;height:200px;text-align:center;} li{height:200px;display:inline-block;margin-right:10px;background:green;color:white;} <ul> <li>Item 1</li> ...

htmlcssflexboxcentering

Smoothly transition between the new and existing child elements in a React component with a

Currently, I am utilizing a React component that renders a child element through props.children. The content within this child element varies dynamically. I am looking for the most effective method to smoothly transition (fade out the old element and fad ...

javascriptcssreactjs

In MUI React, the opacity of the placeholder is customizable and can be easily adjusted. This allows for the placeholder to be hidden

Currently, I am facing an issue with a filled variant TextField from Mui React. I have tried to modify it using theme components, but the placeholder text becomes hidden when the field is not focused. See here for Before Focus And here for On Focus I hav ...

cssreactjstypescriptmaterial-uiplaceholder

Transparent PNG slider images with fixed background

I am encountering a strange issue with one of our projects Here on We have an images-menu created using the Kwicks script. The problem arises when we use .png format images that are partially transparent. When these images slide over each other, the bott ...

jquerycsskwicks

Guidelines for implementing a logout feature in Django using templates

Here is my views.py file: from django.shortcuts import render from django.views.decorators.csrf import csrf_exempt import os # Create your views here. @csrf_exempt def index(request): if('loggedIn' in request.session): id = request. ...

pythonhtmldjango

Close the tooltip automatically after a set period

Looking to create an effect where a tooltip appears when hovering over an element and then disappears after a few seconds, even if the mouse is still on the element. Here is my current code: <div data-sentence-tooltip="yes" data-tooltip-content: "some ...

javascriptjqueryhtmlcss

Utilizing a live input from an HTML form in App-Script

I am completely new to the world of HTML and App-Script. My goal is to create a dynamic list of options from a Google Sheet that will populate a listbox in my HTML code. When a user selects an option from the listbox and clicks submit, I want that value to ...

javascripthtmlgoogle-apps-scriptgoogle-sheets

Extracting information from HTML and transferring it to Javascript using jQuery

My goal is to utilize jsGrid for showcasing database data without repeating code extensively. I aim to generate separate grids for each <div> with a specific id while passing on relevant values accordingly. To clarify my objective, here's a sni ...

javascriptjqueryhtml

Dealing with jQuery's scrollTop viewport problem: Adding a personalized value to position().top

I'm currently working on a single-page WordPress site. Since it's all contained on one page, I've implemented jQuery scrollTop to animate the menu when clicked. However, I am facing an issue where the fixed menu is overlapping the content of ...

jqueryhtmlpositionviewportscrolltop

Is it possible to invoke this PHP function within an HTML document?

I'm in the process of developing a social networking platform that allows users to receive notifications when someone follows or unfollows them. The purchased plugin includes a function for notifying users about the number of notifications they have. ...

phphtml

Colorful layers of nested divs

I need help changing the background-color of the parent div behind the children ones. I want it to be darker like in this image. Here's my HTML: <div class="main"> <div class="sub"> </div> </div> And here is my CSS: ...

csshtml