Icons will be displayed when hovered over

Is it possible to display icons on hover in a div and hide them otherwise using just CSS? Or do I need to use javascript for this function?

Thanks in advance!

Example:

HTML:

<div id="text_entry">
    <p>Some text here</p>
    <span class="operations">
        <a class="delete" href="">Delete</a> | <a class="edit" href="">Edit</a>
    </span>
</div>

CSS:

.edit{
    background: url('images/edit_icon.png') no-repeat;
}

.delete{
    background: url('images/edit_icon.png') no-repeat;
}

.operations{
    display: none;
}

Answer №1

#text_input .operations       { display:none }
#text_input:hover .operations { display:block }

Consider assigning a custom CSS class to your div and then using it as the selector.

Alternatively, if you prefer the span to be completely eliminated:

#text_input .operations       { visibility:hidden }
#text_input:hover .operations { visibility:visible }

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

Is there a way to update my profile picture without having to constantly refresh the page after uploading it?

Here is the code for my profile page. I am considering using a callback along with another useEffect function, but I'm unsure. Please help me in finding a solution. For now, let's ignore all the code related to deleting, saving, and handling ingr ...

Exploring Google Charts: Creating Double Bar Charts Using Dual Axis on Internet Explorer

I have encountered an issue while trying to create multiple bar charts with dual axes on the same page. Everything works perfectly in Chrome, but unfortunately it does not function properly in IE. When viewing the charts in IE, an error message appears: ...

Unable to render HTML through Jquery ajax functionality

success: function(json) { for (var i = 0; i < json.length; i++) { var response = json[i]; $('#rv-container').html('<p>' + response.name + '</p>' + '<span>' + response ...

Steps to display a temporary placeholder image while waiting for the main image to load

Displaying the second image upon hovering over the first image is the goal here. The path to the second image is stored in data-alt-src To achieve this, a function has been created to swap the src attribute of the img tag with the data-alt-src value for d ...

Is it possible to emphasize a duration of 25 minutes on an analog clock by utilizing CSS gradients?

I am in the process of incorporating a countdown timer but with an analog clock rather than a digital one. My objective is to emphasize the next 25 minutes as a circle sector that commences from the minute hand on the clock. Here is what I have developed ...

Issue with JQuery UI Tabs not displaying additional HTML pages in JavaScript

One issue I'm facing is that I added Tabs from JQuery UI on my website. The tab containing paragraphs loads fine, but the tabs linked to other HTML pages (which don't have tabs) won't load. Here is my .js file code and .html code: $(funct ...

Synced Slideshows

Currently experimenting with the Owl Carousel plugin to create multiple synced carousels using their demo at the link below. However, I'm facing a specific issue when dealing with different numbers of small items in each carousel. I've successfu ...

Obtaining Relative Values within Every Iteration using jQuery

I'm currently facing an issue with retrieving relative values within a .each() loop using jQuery. I have a set of table rows that contain a text input and a radio button each. My objective is to iterate through each row and save the value of the text ...

Having trouble with implementing ng-hide and ng-show functionality

I have been working on creating my very first Angular website and so far, everything has been going smoothly with the first page. However, I am facing an issue with the second page not appearing as expected when it meets the condition set with ng-show in t ...

Guide on how to use Ajax in Flask to render a template after a post request

I'm looking to dynamically render a new template after making a jQuery ajax post request. Can someone provide guidance on how to achieve this using jQuery/ajax? Below is the initial route where the post request is sent: @app.route("/data") def data( ...

Obtaining numerous data points in a multi-select element within HTML

Struggling with determining the values of multiple <select> tags in an HTML file simultaneously? function knowAllValues(){ var color_element = document.getElementById("color"); var size_element = document.getElementById("size"); ...

Issue: The object identified as #<Object> does not contain the 'toUpperCase' method

I am currently encountering the error Object #<Object> has no method 'toUpperCase' right before the POST request is initiated. Any assistance you can provide would be greatly appreciated! Thank you in advance. function ajaxeo(url, data, me ...

Using Jquery AJAX to Submit an HTML Form

Trying to use AJAX to submit an HTML form using this specific example. The code for the HTML form: <form id="formoid" action="studentFormInsert.php" title="" method="post"> <div> <label class="title">First Name</label> ...

html - Removing excess space following the footer

Having trouble getting rid of the excess white space below my footer on this website: I attempted to search for a solution online and even added padding:0; to the footer's CSS, but unfortunately it didn't solve the issue. Appreciate any assista ...

Skip over the em tags while extracting the content from the class name using the Parsel selector

Is there a way to extract the contents of a specific class name, including what's inside and after 'em' tags? Refer to the image below for context: My attempted methods and the corresponding outcomes are as follows: Attempt 1: driver = w ...

Ensure that the divs are properly aligned with the paragraphs

I received assistance previously, and I am seeking additional help in maintaining the position or adjusting the size of elements to fit different window viewport sizes such as tablets, mobile devices, or varying monitor sizes while keeping the appearance c ...

Is there a way to adjust the size of a video thumbnail to fit within a

Currently, I am developing a system to remotely control home electrical devices via the web. However, I am facing an issue with fitting camera images properly within their container. How can I ensure that the video thumbnail fits perfectly in the designat ...

The tabs are visible in the drawer, but the transition is not occurring

I am a beginner when it comes to using material ui. After clicking on advanced sports search, a drawer pops up. I have been trying to incorporate tabs in the drawer, but every time I click on tab two, the drawer closes. In reality, it should switch between ...

Send form data without reloading the page and connect it to a JavaScript script

I've designed a system that reveals values based on a specific input selection. Below is the main form where users can enter model numbers and press enter: <form> <input type="text" name="ModNum" id="ModelNumber" pattern="^PIV13RT[23]?$" ...

Storing information on the webpage when it is refreshed

My goal is to maintain the order of the data in the target ordered list even after a page refresh, achieved through jQuery prepend on document ready. Here's the code snippet: // when a refresh event occurs window.onbeforeunload = function(event){ ...