Display the assigned image when hovering over each item in the list

Question

Display the assigned image when hovering over each item in the list

I am currently working on a project to showcase a list of names along with their corresponding images.

To achieve this, I have set up a service that includes all the names and associated images:

import { Case } from './case';

export const CASES: Case[] = [
  { name: 'Diesel', image: '/assets/images/diesel.png', link: '' },
  { name: 'WeWork Berlin', image: '/assets/images/berlin.png', link: '' },
  { name: 'Fritzhansen', image: '/assets/images/fritzhansen.png', link: '' },
  { name: 'Savum', image: '/assets/images/savum.png', link: '' },
  { name: 'Eskay', image: '/assets/images/eskay.png', link: '' },
  { name: 'Diesel', image: '/assets/images/diesel-snd.png', link: '' },
  { name: 'Mobilia', image: '/assets/images/mobilia.png', link: '' },
  { name: 'Rarekind', image: '/assets/images/rarekind.png', link: '' }
];

The list of cases is retrieved in the case-list component.ts file:

import {Component, OnInit} from '@angular/core';
import { CASES } from '../mock/mock-cases';

@Component({
  selector: 'app-case-list',
  templateUrl: './case-list.component.html',
  styleUrls: ['./case-list.component.scss']
})
export class CaseListComponent implements OnInit {

  cases = CASES;

  ...

}

In the case-list's HTML file, I am using a loop to display the names and their images:

<div *ngFor="let case of cases" class="container-fluid d-flex justify-content-center">

  <ul>
    <li class="text-center">
      {{ case.name }}
    </li>
  </ul>

  <img src="{{ case.image }}" alt="First" class="position-absolute align-self-center d-none">

</div>

However, I want to enhance this functionality. Currently, all images are visible at once.

My goal is to make the image appear only when the corresponding li item is hovered over. Moreover, I want only the image linked to the hovered li item to be displayed - for example, if the "Savum" item is hovered over, only its image 'savum.png' should show.

How can I implement this feature in Angular?

html css angular typescript

Answer 1

Answer №1

Create two functions for mouseenter and mouseleave events, allowing the image url to be set when hovering over a specific list item. The mouseenter function retrieves the url of the item as a parameter and stores it in a public property called imageUrl.

Here is an example of what your .ts file should look like:

    export class CaseListComponent implements OnInit {

      cases = CASES;

      imageUrl: string;

      mouseEnter(url: string) {
        this.imageUrl = url;
      }

      mouseLeave() {
        this.imageUrl = null;
      }

    }

// Use the stored imageUrl value to update the src attribute of the image tag, displaying it if there's a string present. Validation is omitted for simplicity.

Your .html code would be structured similarly to this:

<div class="container-fluid d-flex justify-content-center">

  <ul>
    <li (mouseenter)="mouseEnter(case.image)" (mouseleave)="mouseLeave()" class="text-center" *ngFor="let case of cases">
      {{ case.name }}
    </li>
  </ul>

  <img *ngIf="!!imageUrl" [src]="imageUrl" class="position-absolute align-self-center">

</div>

Answer 2

Create two functions for mouseenter and mouseleave events, allowing the image url to be set when hovering over a specific list item. The mouseenter function retrieves the url of the item as a parameter and stores it in a public property called imageUrl.

Here is an example of what your .ts file should look like:

    export class CaseListComponent implements OnInit {

      cases = CASES;

      imageUrl: string;

      mouseEnter(url: string) {
        this.imageUrl = url;
      }

      mouseLeave() {
        this.imageUrl = null;
      }

    }

// Use the stored imageUrl value to update the src attribute of the image tag, displaying it if there's a string present. Validation is omitted for simplicity.

Your .html code would be structured similarly to this:

<div class="container-fluid d-flex justify-content-center">

  <ul>
    <li (mouseenter)="mouseEnter(case.image)" (mouseleave)="mouseLeave()" class="text-center" *ngFor="let case of cases">
      {{ case.name }}
    </li>
  </ul>

  <img *ngIf="!!imageUrl" [src]="imageUrl" class="position-absolute align-self-center">

</div>

Answer 3

Answer №2

Here is my proposed solution:

Add a unique css class to each li and img based on their index. Initially hide each image.

Implement the mouseenter and mouseleave events for each li element as shown below:

  <ul>
    <li class="text-center" *ngFor="let case of cases, let i=index" 
        (mouseenter)="mouseEnter(i)"  
        (mouseleave)="mouseLeave(i)">
      {{ case.name }}
    </li>
  </ul>

  <img *ngFor="let case of cases, let i=index" src="{{ case.image }}" alt="First" class="position-absolute align-self-center icon-image" ngClass="imgss{{i}}">
</div>

The css rule for .icon-image class should be as follows:

  .icon-image{
  display: none;
}

In your TypeScript file, handle the events and modify the visibility of the elements based on the hovered index.

`

mouseEnter(itemIndex){
 console.log('hover over', itemIndex);
 const element = this.elRef.nativeElement.querySelector(`.imgss${itemIndex}`);
 element.style.display ="block";
 console.log('hover over', element);
}
mouseLeave(itemIndex){
 const element = this.elRef.nativeElement.querySelector(`.imgss${itemIndex}`);
 element.style.display ="none";
}

` View a working example here:

Working demo

Answer 4

Here is my proposed solution:

Add a unique css class to each li and img based on their index. Initially hide each image.

Implement the mouseenter and mouseleave events for each li element as shown below:

  <ul>
    <li class="text-center" *ngFor="let case of cases, let i=index" 
        (mouseenter)="mouseEnter(i)"  
        (mouseleave)="mouseLeave(i)">
      {{ case.name }}
    </li>
  </ul>

  <img *ngFor="let case of cases, let i=index" src="{{ case.image }}" alt="First" class="position-absolute align-self-center icon-image" ngClass="imgss{{i}}">
</div>

The css rule for .icon-image class should be as follows:

  .icon-image{
  display: none;
}

In your TypeScript file, handle the events and modify the visibility of the elements based on the hovered index.

`

mouseEnter(itemIndex){
 console.log('hover over', itemIndex);
 const element = this.elRef.nativeElement.querySelector(`.imgss${itemIndex}`);
 element.style.display ="block";
 console.log('hover over', element);
}
mouseLeave(itemIndex){
 const element = this.elRef.nativeElement.querySelector(`.imgss${itemIndex}`);
 element.style.display ="none";
}

` View a working example here:

Working demo

Display the assigned image when hovering over each item in the list

Answer №1

Answer №2

Similar questions

Each element in ngFor triggers the invocation of ngAfterContentInit by Angular

What's the best way to handle variables and numerical calculations within PHP loops when dealing with forms?

Adaptable CSS triangle design

Struggling to properly position navigation bar items in a Bootstrap website

Managing the subscription function within the change event of a select tag in Angular 5 to prevent it from triggering repeatedly

Changing the color of the selected item in a Jquery Mobile ListView

Exploring alternative methods for accessing object values in TypeScript using a string object path without relying on the eval function

The top-center alignment in Toaster (ngx-toastr) is missing a top margin

Issue with TypeScript createProgram due to undefined 'ts.sys' error

"Troubleshooting vertical tab inconsistencies in Jquery: addressing unexpected gaps and alignment

How wide should a <NavDropdown> be in react-bootstrap 5?

What is the best way to host a single page application within a sub-directory using nginx?

Typescript integration in Next.js

Exploring the world of video playback with Angular

What is the best way to automatically scroll to the chosen option when a button is clicked?

Is there a way for me to determine the exact coordinates of all buttons on a given webpage?

How can I delete an individual HTML element that does not have a class or ID?

Modifying css background in real-time based on the current weather conditions

Can you tell me about the feature called "Inspect Browser" box?

The primary section is not extending completely to the bottom, resulting in the footer not being aligned correctly at the bottom of the