CSS :target activates on hover instead of click

I have a slider that is currently functioning well. However, I am facing a small issue. I would like to change the slider image when hovering over one of the <li> elements, instead of clicking on them.

Is this achievable? I came across this reference link, but perhaps there is a new technique already available?

.slide {
  position: absolute;
  display: none;
  left: -150;
}

.next {
  font-size: 50px;
  height: 50px;
  line-height: 50px;
  position: absolute;
  top: calc(50% - 25px);
  right: 0;
}

.prev {
  font-size: 50px;
  height: 50px;
  line-height: 50px;
  position: absolute;
  top: calc(50% - 25px);
}

.slider .slide:target {
  transition: 1s;
  left: 0;
  z-index: 999;
  display: block;
}

ul {
  padding-top: 250px
}

ul li:hover>a:target {
  left: 0;
  transition: 1s;
  z-index: 9999;
}
<div class='slider'>
  <div class='slide' id="slide1" style="display: block;">
    <a class="prev" href="#slide4">&lt;</a>
    <img src="http://pic.1fotonin.com/data/wallpapers/9/WDF_576006.jpg" width="450" height="150" />
    <a class="next" href="#slide2">&gt;</a>
  </div>
  <div class='slide' id="slide2">
    <a class="prev" href="#slide1">&lt;</a>
    <img src="http://pic.1fotonin.com/data/wallpapers/9/WDF_575498.jpg" width="450" height="150" />
    <a class="next" href="#slide3">&gt;</a>
  </div>
  <div class='slide' id="slide3">
    <a class="prev" href="#slide1">&lt;</a>
    <img src="http://pic.1fotonin.com/data/wallpapers/9/WDF_576753.jpg" width="450" height="150" />
    <a class="next" href="#slide4">&gt;</a>
  </div>
  <div class='slide' id="slide4">
    <a class="prev" href="#slide3">&lt;</a>
    <img src="http://pic.1fotonin.com/data/wallpapers/9/WDF_575922.jpg" width="450" height="150" />
    <a class="next" href="#slide1">&gt;</a>
  </div>
</div>
<ul>
  <li><a href="#slide1">Slide 1</a></li>
  <li><a href="#slide2">Slide 2</a></li>
  <li><a href="#slide3">Slide 3</a></li>
  <li><a href="#slide4">Slide 4</a></li>
</ul>

htmlcsspure-css

Answer №1

If you're wondering about using :target, feel free to take a look at my Fiddle.

.slide
{
  position: absolute;
  display: none;
  left:0;
}
ul
{
  padding-top: 50px;
  list-style:none;
}
ul li
{
  display:inline-block;
}
ul li a
{
  position:relative;
  top:-50px;
  left:0;
}
ul li a:hover + .slide
{
  transition: 1s;
  z-index: 9999;
  display: block;
}
<div class='slider'>
  <ul>
    <li>
      <a href="#slide1">Slide 1</a>
      <div class='slide' id="slide1" style="display: block;">
        <img src="https://i.picsum.photos/id/591/450/150.jpg" width="450" height="150" />
      </div>
    </li>
    <li>
      <a href="#slide2">Slide 2</a>
      <div class='slide' id="slide2">
        <img src="https://i.picsum.photos/id/402/450/150.jpg" width="450" height="150" />
      </div>
    </li>
    <li>
      <a href="#slide3">Slide 3</a>
      <div class='slide' id="slide3">
        <img src="https://i.picsum.photos/id/1067/450/150.jpg" width="450" height="150" />
      </div>
    </li>
    <li>
      <a href="#slide4">Slide 4</a>
      <div class='slide' id="slide4">
        <img src="https://i.picsum.photos/id/382/450/150.jpg" width="450" height="150" />
      </div>
    </li>
  </ul>
</div>

I've made things simpler by removing the next and before buttons, but they can easily be added back in if needed.

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 making changes to FontAwesome CSS using jQuery?

I am currently working on an MVC project where I am using Ajax to update a specific section of a View that contains a FontAwesome 5 icon. The FontAwesome icons are set using CSS classes, so my initial assumption was that it would be simple to remove and ad ...

jquerycssfont-awesomefont-awesome-5

There appears to be an issue with reading the property 'toLowerCase' of an undefined element, and I'm having trouble identifying the error

The variables I have initialized (globally): var audio; var LANGUAGE; var audioArray; var MEDIAARRAY; var WORDS; var SOUNDARRAY; This specific line is causing the error: var audioId = MEDIAARRAY.audio.lowercase.indexOf(exObject['exerciseGetWordInpu ...

javascriptjqueryhtmlajax

Conceal the div by clicking outside of it

Is there a way to conceal the hidden div with the "hidden" class? I'd like for it to slide out when the user clicks outside of the hidden div. HTML <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.c ...

javascriptjqueryhtmlcss

Astro Project experiencing issues with loading SRC folder and style tags

After setting up a brand new astro repository with the following commands: npm create astro@latest npm run dev I encountered an issue where the default project template failed to display correctly on my computer. Here is how the page appeared: https://i. ...

javascripthtmlcssgoogle-chromeastrojs

Step by step guide on incorporating two background images in a single header

I'm looking to create a header with a background image that appears twice, like this: To achieve the effect, I added opacity of 0.5 to one of the images, but it is affecting everything in my header including text and logo. Is there a way to prevent t ...

htmlcssbootstrap-4

Creating animations with an svg mask can be effective, however, it seems to only work properly

I have been experimenting with creating a transition effect using SVG masks and CSS. Initially, everything was working as intended, but after a few repetitions (usually 1 or 2, unpredictably), the transition effect would suddenly stop and become instantane ...

cssanimationsvgsvg-animate

How can I use appendChild to place two different elements into a single div?

While exploring similar questions on this topic, I have unfortunately not come across a solution that works for me. My challenge is trying to insert two a elements inside of a newly created div element using appendChild. However, I am unable to append them ...

javascripthtmlcsstypescript

Creating a Custom Bookmark Title for Apple Touch Icon on Mobile Homescreen

Can the title of a touch icon on the homescreen of an iOS device be customized? https://i.sstatic.net/9YL0t.jpg While it's currently acceptable, I am interested in creating a custom title instead of using a default one. ...

htmliosfavicon

Creating a new web application, I require a loading overlay to appear during transitions between pages

I've checked high and low, but I can't seem to find the solution! My webapp has a page that is bogged down with data causing it to load slowly. Is there a way to display a loading div while transitioning to the next page? Perhaps something like ...

javascriptjqueryhtmlcsscordova

Dynamic addition of CSS classes to HTML elements using PHP

I'm working on developing an application that includes multiple courses. Each course is completed over a certain number of days, such as 14 days or 20 days. To visually track progress, I've implemented a step progress bar that looks like this:htt ...

javascriptphpcsslaravellaravel-blade

Retrieving table information using javascript

My goal is to retrieve information from the <td> elements within the following HTML table: <table class="datadisplaytable" summary="This table lists the scheduled meeting times and assigned instructors for this class.."> <caption class="cap ...

javascripthtml

Looking to execute a PHP script upon form submission

I have a form that I need to submit in order for a PHP script to run using AJAX. <form method="post" action="index.php" id="entryform" name="entryform"> <input type="submit" name="submit" value="Submit" onclick="JavaScript:xmlhttpPost('/web/ ...

phpjavascripthtmlajaxforms

Issues with modals appearing improperly after transitioning to NG-Bootstrap 15 and Bootstrap 5 upgrade

UPDATED following a thorough examination: In the process of upgrading our application from NG-Boostrap v11 with bootstrap 4 to NG-Boostrap v15 with Bootstrap 5 and Popper, we also made the switch from Angular 15 to Angular 16. Despite successfully resolvi ...

cssangularbootstrap-5ng-bootstrap

Edge and Internet Explorer fail to recognize the :focus CSS selector

I am utilizing CSS to make our placeholders jump up when clicked inside, but Edge is not recognizing the CSS. It works fine on every other browser except for Edge. I've tried various solutions but none seem to work on Edge. Any thoughts on what might ...

cssinternet-explorerfocusmicrosoft-edge

position: absolute is only applying to the initial item

I have a user card component with a menu button at the top that should display a menu when clicked. The issue I'm facing is that when I click on the menu button of the other user cards, the menu still shows on the first card instead of the one I click ...

javascripthtmlcssvue.jsvuejs2

Div element failing to scroll with excessive content

I'm currently working on a modal using Mui Modal and I've encountered an issue. Everything seems to be functioning correctly until I add more items to the cart. When the minHeight exceeds 500, it stops at 100vh and only displays 5 items, even if ...

cssreactjsmaterial-ui

Here is a helpful guide on updating dropdown values in real time by retrieving data from an SQL database

This feature allows users to select a package category from a dropdown menu. For example, selecting "Unifi" will display only Unifi packages, while selecting "Streamyx" will show only Streamyx packages. However, if I first select Unifi and then change to S ...

javascriptphphtml

Can the Bootstrap grid be arranged vertically?

I'm finding it difficult to work on a project with Bootstrap's horizontal grid system. What I want to achieve is to have my page divided into 4 sections, with the left side blocks having equal height and the right side blocks having varying heigh ...

htmlcssbootstrap-5

Is there a way to embed HTML code within a JavaScript variable?

Embedding HTML code within Java Flow can be quite interesting For instance: Check out this JSFiddle link And here's how you can incorporate it into your script: widget.value += ""; Generating a Pro Roseic Facebook POP-UP Box through Widg ...

javascripthtml

Adjusting the arrangement of elements based on the size of the screen

Two floating <div>'s are styled with classes .a and .b. Both <div>'s are floated to the left, each taking up 50% of the width, aligning them horizontally. On smaller screens, I want both <div>'s to be aligned vertically. ...

htmlcss-floatcss-position