Steps for accessing the `<img>` tag within an `<a>` tag to focus on the `<img>` element in Internet Explorer

How can I target the img tag inside an href tag to set focus on the <img> element?

For example:

<a href="#"><img class="img1" src="abc.png"/></a>

The CSS selector a .img1:focus {} does not seem to work. I am unable to access the <img> element inside an <a href></a> tag.

If I add a class to the img tag, I can apply focus to it, but the img and a tags are different sizes causing issues. For example, using 

<a href="#" class="test"><img class="img1" src="abc.png"/></a>
, then a.test:focus{} works, but I specifically need focus for the img tag.

cssimagehref

Answer №1

Make sure to include a space between a and .img1 (if you write it without a space, it refers to an "a tag with img1 class"). So the correct syntax is:

a .img1:focus {}

This selector targets elements with the class img1 inside an a tag.

NOTE: In the provided link from @jdv's comment on your original response, pay attention to the second answer rather than the accepted one. To solve your issue, add a tabindex attribute to your img tag like so:

<a href ='#' ><img class="img1" src="abc.png" tabindex="0"/> </a>

Answer №2

give this code a shot

<a href ='#' id='link'><img class="img1" src="abc.png"/> </a>

a#link .img1:focus{}

Answer №3

Concentration is often linked with elements like text fields. My suggestion would be to utilize mouseover in this manner instead. 

a img:hover{
  width: 500px;
}
<a><img class="img1" src="http://via.placeholder.com/350x150"/></a>

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

What is the best way to vertically align a two-line nav item?

I am looking to design a navigation menu with items that can accommodate one or two lines of text. The items should have consistent height and the text should be vertically centered. Additionally, I want the entire box to be clickable, not just the text w ...

htmlcss

Is there a way to customize the design of the "Browse" button within the HTML file upload control?

I've been searching high and low on the internet for a simple, sleek method to customize the appearance of the Browse button on an HTML <input type=file> element. However, all the solutions I've come across involve hiding controls, placing ...

htmlfile-uploadcss

The Ultimate Slider: Highlighting Custom Navigation Link as Active While Navigating with Arrows

I have implemented custom navigation links for my slick slider in order to navigate to specific slides. The functionality works perfectly, but I encountered an issue when I added the built-in arrows provided by the slider. Whenever I use these arrows to n ...

javascriptjquerycsssliderslick.js

Providing data in response to a completed form submission

As a beginner, I'm attempting to accomplish the following task: a user selects options from three dropdown menus within a form, and the chosen values are then sent to another file for processing. action="process.php" method="post" In the processing ...

javascriptphphtmlcss

having each individual div function on its own accord

Is there a more efficient way to make HTML and CSS function independently without duplicating the code multiple times and changing IDs or class names? Currently, only the top male and female button works when clicked. I am looking for a CSS-only solution t ...

htmlcss

Adding a class to an element can be easily achieved when both input fields have values

Is it possible to apply the "active" class to the element go_back_right only when both inputs with classes search_box_name and search_box_id have content in them? I've tried looking for solutions on this platform, but being new to JavaScript, I couldn ...

javascripthtmljquerycss

How can we create responsive websites?

Since starting my Software Developer studies about 3 months ago, I've been working on a website project for a driving school with a team of four. The issue we're facing is that when we transfer and open files between laptops, the website layout a ...

javascripthtmlcss

The sidebar scrolling feature seems to be malfunctioning, as only the page scrolling functionality is currently

I'm currently working on a webpage that features a sidebar, along with other elements as shown below: In this design, the Your Friends section represents the sidebar. However, I have noticed that when I hover over the sidebar and try to scroll, it&ap ...

htmlcss

Generate a hard copy of the data table row without needing to view it beforehand

Here are some records from a table: +--------+---------+-------+----------+--------+ | Name | Address | Phone + Email | Action | +--------+---------+-------+----------+--------+ | Andy | NYC | 555 | <a href="/cdn-cgi/l/email-protection" cl ...

javascriptphpjqueryhtmlcss

Triggering jQuery events can be customized by excluding certain elements using the

Is there a way to hide the div "popu" when clicking on the img "tri"? I've tried using .not() since the img is a child of the div popu, but it didn't work. Also, I need to make sure that clicking on the div "textb" does not trigger the hide actio ...

javascriptjqueryhtmlcss

Styling in Next.js with conditions

I am attempting to create a scenario where a link becomes active if the pathname matches its href value. function Component() { const pathname = usePathname(); return ( <div className="links"> <Link href="/"> ...

cssnext.js

What is the best way to center a div vertically within a bootstrap 5 carousel across all screen sizes?

Looking to center the text div within a Bootstrap 5 carousel both vertically on large screens and small (mobile) screens. To view the site, visit... Below is the HTML for the div. The targeted div has the CSS class #hero .carousel-container { display ...

htmlcsstwitter-bootstrapflexboxbootstrap-5

How to arrange three buttons in a row using CSS styling

After reviewing similar issues posted by others, I have not found a solution to my problem. Despite trying the suggested solutions, I am unable to center two buttons representing different departments on my webpage. Here is my source code: <script ...

javascriptjqueryhtmlcss

What is the best way to extract a specific section of a webpage element using Python and Selenium?

I'm looking to extract the string '/echipa/lok-moscova/Sjs63WfK' that comes after window.open from this specific web element using selenium, but I'm unsure of how to achieve it. <a href="#" class="participant-imglink&q ...

pythonselenium-webdriverhref

The Jquery css on my website is not functioning properly

After creating a website feature where clicking on a specific div triggers an onclick event processing a chat_generate function, I encountered some issues. This funciton should insert HTML for the chat into a designated .open_div based on the id generated ...

javascriptphpjqueryhtmlcss

CSS styles are combined and included at the beginning of the index.html file

During the creation of a production version of my Angular 9.0.4 application, I noticed that the CSS is bundled and placed at the top of the dist/index.html file as shown below: <link rel="stylesheet" href="styles.6ea28d52542acb20a4c6.css"><!docty ...

cssangular

Hover over images for cool effects

Check out the code snippet I created on this link The current functionality enlarges images by 20 percent and overlaps into the table on hover. How can I enlarge both the image and table dimensions simultaneously? Below is the HTML code: <table borde ...

htmlcss

Text box input that displays the latter portion before the initial part

Looking for assistance with showing the end of the entered text rather than the beginning in an input field. For example, the input could be "Starting portion, Ending Portion". If the input field is limited to 14 characters, instead of displaying the firs ...

htmlcssangular

Achieve a div to fill the remaining width while using list-style-position: inside

I have been attempting to make another div occupy the remaining space in the numerical list item using list-style-position: inside, but it does not seem to be working for me. While I could opt for list-style-position: outside and add some spacing to avoid ...

htmlcss

What is the difference between class at DOM and className at component?

When passing the className props to the child component, sometimes the className for the active link is not correctly reflected in the DOM element during production: The child component (Link) receives the className prop for the active link from the paren ...

cssnext.js