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

Fade between two divs using jQuery works perfectly with images, but unfortunately, it does not work with iframes

Edit: Uploaded live, with images, and with iframes I am experimenting with making pane1 fade into pane2. It successfully works with images, but I am curious if it can be achieved with iframes. Is this feasible? Any insights or suggestions are much appreci ...

Controlling File Upload Edits: A Guide to Effective Management

I am facing an issue on my product page related to adding and updating products in the database. The problem lies with images not displaying correctly. During the product insertion process, everything works fine. In my aspx page, I have the following code ...

A curious phenomenon observed in the behavior of the jQuery offset() method

Once I executed the following code snippet multiple times: $view.offset({ left : X, //X remains constant top : this.y }); console.log($view.offset()); //displays expected output I noticed (using Firebug) that the HTML code looked like this: <di ...

Sending a specified data type as an argument to a hyperlink

Is there a better way to create a parameter URL containing the same text that is typed into this text box? I am currently trying to achieve this but it doesn't seem to be working. <!DOCTYPE html> <html> <head> <script src=" ...

Customizing Styles in Material UI with React

I am facing an issue with customizing the styles in my Material UI theme in React. Specifically, I am trying to modify the border of the columnsContainer but it doesn't seem to work, only the root style is having an effect. Take a look at this Codesa ...

Unable to retrieve information from the openweatherapi

I am currently working on developing a basic Weather App, and I have chosen to utilize the jQuery Ajax method to fetch data from openweathermap. The function I am using to retrieve the data is as follows: $(document).ready(function(){ $('#submitWeath ...

retrieve a reply from a PHP script and incorporate it into JavaScript following an AJAX request

I've been working with an ajax call and everything seems to be running smoothly thanks to this script: $(document).ready(function() { $('.sortable').sortable({ stop: function(event, ui) { $(ui.item).effect("highlight"); ...

The error message received states: "materialize-css Uncaught TypeError: Vel is not defined as

My current setup involves webpack as the bundler/loader, and I've successfully loaded materialize css (js/css). However, when attempting to use the toast feature, an error is thrown: Uncaught TypeError: Vel is not a function The library is being inc ...

Using flexbox to adjust the height of a block in the layout

Is there a way to modify the height of .half-containers1 and .half-containers2? Additionally, how can I create the triangle shape that is shown in the image? Is it achievable with CSS alone or do I need to use an image? Check out my fiddle for reference ...

jQuery allows you to assign the identical function to multiple actions

I am faced with a situation where I have multiple actions that need to perform the same function. <ul> <li> <select id="s1"> <option>Name</option> <option>Year</option> ...

Expanding and collapsing all divs with a single click using Jquery

I've gone through numerous resources but I'm still struggling to understand this concept. I have implemented a simple accordion based on this tutorial and now I want to include an "expand/collapse all" link. While I was able to expand all the ite ...

Display a label upon hovering over an image

Is there a way to create an effect where upon hovering over an image, a pop-up image is displayed like this: Any suggestions on how I can achieve this using HTML and CSS? Thanks in advance! ...

Having trouble getting any output from my Jquery post function. Any suggestions?

I'm currently diving into the world of AJAX, but I'm facing challenges in retrieving the output from a PHP script. Below is the code snippet that I am working with: <form> <input type="text" id="url" name="url" value="" onkeydo ...

Incompatible parameter type for the Angular keyvalue pipe: the argument does not match the assigned parameter type

I need to display the keys and values of a map in my HTML file by iterating over it. To achieve this, I utilized Angular's *ngfor with the keyvalue pipe. However, I encountered an error when using ngFor: The argument type Map<string, BarcodeInfo ...

Tips for selecting a checkbox with Puppeteer

I've implemented the code in this way: await page.$eval('input[name=name_check]', check => { check.checked = true; }); This code is intended for multiple checkboxes. However, I need it to work for a single checkbox only. Is there a way ...

What methods can I use to adjust my HTML content once I have parsed my JSON file?

<script type="text/javascript"> window.alert = function(){}; var defaultCSS = document.getElementById('bootstrap-css'); function changeCSS(css){ if(css) $('head > link').filter(':first').replaceWit ...

The Bootstrap table fails to display any data retrieved from the server

I recently attempted to implement pagination using this resource: After setting up the HTML table on my page and confirming that the server-side code is functioning properly by checking the Network tab in the F12 tools, I ran into an issue. The data retur ...

Having trouble with the responsive design not functioning properly?

Having trouble with mobile view in my simple HTML Bootstrap code. Everything looks fine in desktop view but not in mobile. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> < ...

Exploring the intricacies of XML embedded within JSON

Utilizing YQL for jQuery, I am able to successfully execute cross-domain REST requests. The JSON response contains the desired XML data as key-value pairs. The specific request being made is: http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%2 ...

Step-by-step guide to setting up Angular 2 with fullpage.js scrolloverflow

I am currently working on a project using Angular 2 that incorporates the fullpage.js port from https://github.com/meiblorn/ngx-fullpage. I am facing an issue with implementing scrolloverflow on a specific section and could use some guidance. I have alread ...