Modify AngularJS behavior to show or hide elements when the user hovers over them

In my template, I display a series of "icons".

<div ng-repeat="data in items | orderBy:'-timestamp'">
    <div class="icon">
        <i>1</i>
        <span>2</span>
    </div>
</div>

To hide i and show span when hovering over .icon, I use the following CSS:

.icon:hover i { display: none; }
.icon:hover span { display: block; }

Additionally, I want to display all instances of span when $scope.options == true. To achieve this, I included the following:

<i ng-hide="options">1</i>
<span ng-show="options">2</span>

However, this caused the :hover effect to stop working properly.

Is there a way to override the ng-show directive so that the CSS still applies when hovering?

javascripthtmlcssangularjs

Answer №1

Check out this plunker

If you want to simplify things, you can rely on Angular's ng-mouseenter/ng-mouseleave instead of dealing with CSS. Additionally, you can use an or condition to display content when a second variable becomes true.

Here's the HTML snippet:

<div ng-repeat="data in items | orderBy:'-timestamp'">
    <div ng-mouseenter="options=true" ng-mouseleave="options=false" class="icon">
        <i ng-hide="options || checkbox">1</i>
        <span ng-show="options || checkbox">2</span>
    </div>

</div>
<input type='checkbox' ng-model="checkbox" ng-click="options=!options">Show

Answer №2

Utilize the $scope.options variable to apply a class to the .icon division, then create a more specific CSS rule to overwrite the :hover effect.

<div class="icon" ng-class="{ custom-class: $scope.options == true }">
  <i ng-hide="options">1</i>
  <span ng-show="options">2</span>
</div>

Furthermore, in your stylesheet:

.icon.custom-class:hover i { display: block; }
.icon.custom-class:hover span { display: block; }

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

Unnecessary socket.io connection in a React component

Incorporating socket.io-client into my react component has been a learning experience. Most tutorials recommend setting it up like this: import openSocket from 'socket.io-client'; const socket = openSocket('http://localhost:8000'); In ...

javascriptreactjssocket.io

Suggestions for efficiently filtering nested objects with multiple levels in RXJS within an Angular environment?

Just a Quick Query: Excuse me, I am new to Typescipt & RxJS. I have this JSON data: [ { "ID": "", "UEN": "", "Name": "", "Address": "", "Telephone&quo ...

javascriptarraystypescriptrxjsfiltering

Refresh the Vue page only once after it is mounted

Users should only experience the page refreshing once upon visiting. However, if I add location.reload() within the mounted() function, it causes an infinite loop of page reloads. ...

javascriptvue.jsvuejs2

What is the process for importing a JSON5 file in Typescript, just like you would with a regular JSON file?

I am looking to import a JSON5 file into a JavaScript object similar to how one can import a JSON file using [import config from '../config.json']. When hovering over, this message is displayed but it's clearly visible. Cannot find module & ...

javascripttypescriptecmascript-6json5

Bringing in a variable from a React component to a JavaScript file

I've created a React component called Button with two states named name and players. Now, I need to access these states in a separate JavaScript file that is not a component. Below are the relevant code snippets: Button.js import {useState} from &qu ...

javascriptreactjscomponents

Eliminating an unwelcome gap between two div elements

I couldn't find anything on Google, so I searched this site and came across a similar topic Unwanted space between divs. I tried applying margin:0px; in several places, but there is still space between the two divs. Here's my HTML: <!DOC ...

csshtml

How can I pass an array object from an HTML form that adheres to a Mongoose schema

I have this HTML form that I'm using to create a new document in my mongo database. The document represents notes given to a teacher based on various criteria. I am storing the notes in an array within the note property, each object containing the aut ...

javascripthtmlnode.jsexpressmongoose

How can I enhance a JavaScript Calendar with more features?

I recently acquired a JavaScript and jQuery calendar from CodeCanyon, which can be found here. I am now faced with the task of integrating this calendar into my workplace website. The current calendar on our ASPX-based site is limited to read-only functio ...

javascriptjqueryhtmlasp.netcalendar

Unexpected token error occurs when using map-spread operator in vue-test-utils combined with jest

I recently set up testing for my Vue project by following the instructions provided in this helpful guide here Upon completion of the guide, I proceeded to create a test for one of my components. However, when I ran jest, I encountered the following error ...

javascriptvue.jsbabeljsjestjsvue-test-utils

Adjust the text color to complement the shifting background shade

I'm looking to customize the hover color of my links to match the constantly changing background. You can view my progress on this in the JSFiddle linked below: https://jsfiddle.net/Lcz7gk72/ Essentially, I want the "[email protected]" text to b ...

javascripthtmlcss

Send the user to the chosen option in the dropdown menu

My goal is to redirect the user based on the option they select. I am having an issue with my HTML code as it currently redirects to "example.com/page" instead of "example.com/page/1". Can someone please assist me in resolving this problem? <select clas ...

javascripthtmldropdown

Issue with pagination controls not appearing in ng-table when retrieving data from the backend

I'm currently facing an issue with pagination controls not displaying while fetching and displaying data from the backend using ng-table. The strange thing is that when I used dummy data, the pagination worked perfectly fine. Can anyone provide assist ...

angularjspaginationngtable

Changing the size of a dynamic watermark png in php

I'm trying to automate the resizing of a watermark to cover 1/4 of an image. The code for the watermark is functioning, but I'm facing issues with resizing it correctly. <?php $image = $_GET['src']; $path_parts = pathinfo($image); ...

phphtmlgd

Managing browser navigation within a web application

I am currently developing a web-based application for internal use in the company I work for. The application is quite intricate, featuring numerous forms that will enable users to both view and input data, which will then be stored in a database upon savi ...

c#javascriptasp.net

What is the best way to update comments after submitting an AJAX request?

I stumbled upon a lightweight script that allows for submitting WordPress comments via AJAX. Although the comments are successfully submitted, the new comment does not appear immediately; only the comment count gets updated. Upon manually refreshing the pa ...

javascriptajaxwordpress

Populate a secondary dropdown menu using the selection from a primary dropdown menu and retrieve the corresponding "value" instead of displaying the value as a dropdown option

I am attempting to create two dropdowns that are populated by another dropdown. Below is the code: HTML: <form type=get action="action.php"> <select name="meal" id="meal" onChange="changecat(this.value);"> <option value="" disabled select ...

javascriptarraysjsonhtml

Potential bug in Internet Explorer with positioning of relative sized table-cell element

I am struggling a bit here. On my webpage, I have background images that are sized to fit the container and the layout is responsive, with bubbles of images and headings positioned around it (resize the browser window to see how everything is placed). The ...

htmlcssinternet-explorercss-position

The transparency in Three.js took a turn for the worse after the update from r67 to r68

I encountered a strange problem when switching from three.js version 67 to version 68. In version 67, everything appeared correctly (triangles behind transparent triangles were visible), but in version 68, something seems to have gone awry. Below are two ...

javascriptthree.jstransparency

Error in AngularJS: $injector:unpr Provider Not Found

I am currently in the process of creating my own service using the factory methodology as outlined in the documentation. However, I seem to be encountering an issue with an unknown provider error. Below is the code for my app which includes the declaration ...

javascriptangularjsangularjs-service

Having issues with your Spring Boot POST request functionality?

I have been working on developing a Spring Boot REST application with AngularJS. Everything seems to be loading properly, all JS and CSS files are included. However, I am experiencing an issue where GET requests work fine, but POST requests fail and do no ...

javaangularjsspringspring-mvcspring-boot