Display updated text on hover over button panel

Is it possible to achieve the following using only CSS without any JavaScript?

The desired outcome is a div containing two font awesome icons aligned to the right side.

Specifically, I am looking for:

- Icon of a pen that reacts on mouse hover

- Icon of an X that also reacts on mouse hover

I attempted to accomplish this by utilizing transforms and transitioning from display: none to display: block. However, it seems like animating this CSS property is not achievable. My current code snippet is as follows:

section.container {min-width: 500px; margin: 10% auto; text-align: center;}
.text-on-hover {cursor: pointer; font-size:20px;}

.text-on-hover:hover:before {opacity: 1;}
.text-on-hover:before {
  content: attr(data-hover);
  margin: 0 10px;
  opacity: 0; 
  transition: all .5s ease-in-out;
}
<section class="container">
  <i class="text-on-hover" data-hover="A long text">A</i>
  <i class="text-on-hover" data-hover="Another long text">B</i>
</section>

Is there a way to achieve this effect using pure CSS? If not, what are the limitations preventing it?

htmlcssbuttonhover

Answer №1

UPDATE: Take a look at the second piece of code.

Here is a possible approach to achieving this.

Visit the CodePen link

@import url(http://fonts.googleapis.com/css?family=Ubuntu:400,500,700);
html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
}
body {
  background-color: #e58139;
}
header {
  background-color: #333;
  width: 100%;
  height: 65px;
  overflow: hidden;
}
.menu-links {
  padding-right: 20px;
}
.toggle-menu {
  position: relative;
  float: right;
  right: -220px;
  transition: right 0.5s ease-in;
}
.content {
  line-height: 43px;
}
.toggle-menu li {
display: inline-block;
list-style-type: none;
}
.toggle {
  padding-top: 5px;
  cursor: pointer;
}
li.toggle:hover span.toggle-menu-bar {
  background-color: #ddd;
}
.toggle-menu-bar {
display: block;
width: 25px;
height: 4px;
background-color: #e58139;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin: 0 auto 3px;
transition: background-color 0.2s;
}
a {
  font-size: 25px;
  text-decoration: none;
  color: #e58139;
  padding-right: 20px;
  transition: color 0.2s;
}
a:hover {
  color: #ddd;
}
.menu-links:hover > .toggle-menu {
  right: 0;
}
<header>
  <div class="menu-links">
    <ul class="toggle-menu">
      <li class="toggle">
        <span class="toggle-menu-bar"></span>
        <span class="toggle-menu-bar"></span>
        <span class="toggle-menu-bar"></span>
      </li>
      <li class="content">
        <ul>
          <li><a href="#">Link 1</a>
          </li>
          <li><a href="#">Link 2</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</header>

UPDATE: Duplicating the following:

View in CodePen

body {
  background: #222222;
}
div.edit,
div.delete {
  position: absolute;
  font-size: 22px;
  color: #989898;
  display: inline-block;
  cursor: pointer;
  transition: all 0.5s;
  right: 5px;
}
div.edit {
  transform: rotate(90deg);
  right: 30px;
}
.btn-container {
  margin: 2px 0 0 155px;
}
.box {
  position: relative;
  background-color: #F5F5F5;
  width: 200px;
  height: 30px;
  border: 10px solid #DDDDDD;
}
div.edit:hover,
div.delete:hover {
  color: #272727;
}
div.edit:hover:before {
  content: 'Edit';
  position: absolute;
  color: #989898;
  font-size: 12px;
  right: 0px;
  top: 30px;
  transform: rotate(-90deg);
}
div.delete:hover:before {
  content: 'Close';
  position: absolute;
  color: #989898;
  font-size: 12px;
  right: 22px;
  top: 5px;
}
.delete:hover + .edit {
  right: 60px;
}
<div class="container">
  <div class="box">
    <div class="btn-container">
      <div class="delete">&#10006;</div>
      <div class="edit">&#9998;</div>
    </div>
  </div>
</div>

Answer №2

It is not possible to animate the display attribute in CSS.

However, in this particular scenario where you are floating right, you can animate the menu's right property like this:

.toggle-menu {
    right: -220px;
    position: relative;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.toggle-menu:hover {
    right: 0;
}

You can see an example here: http://jsfiddle.net/v8t2td3b/1/

(Please note that I have also removed the style="display: none;" from the .content li)

Answer №3

Building a Responsive Menu

<div class="menu">
    <div class="hamburger"></div>
    <div class="menu-items">
        <a href="">...</a>
        <a href="">...</a>
    </div>
</div>

CSS Solution

.menu-items {
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: all 0.5s ease;
}

.menu:hover > .menu-items {
    opacity: 1;
    width: 200px; /*or adjust the width*/
}

This method provides a way to create a menu that is responsive without relying on JavaScript.

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

Encountering issues with the hyperlink tag '<a>' in an HTML document

I've encountered an issue with the code on my HTML page: <body> <div align="center"> <a href="../index.html"> <img border="0" src="banner1.jpg" width="800" height="120" alt="Ecommerce Knowledge Base"> &l ...

javascriptjqueryhtml

Check the validity of the data by logging into another website

I've run into a bit of a problem while working on my website. Here's a brief explanation (using fake addresses), I have a website, www.website1.com, with lots of well-coded elements. You can log in to this website using www.website2.com. So whe ...

phphtmlcurl

Only output to the console if the data returned from an AJAX request has been

Here is a script that I created: <script type="text/javascript> $('.storage').html(""); setInterval(function(){ $.get('./playcommand.php', function(data) { if($('.storage').html() !== data){ ...

javascriptphpjqueryhtmlajax

Arrange documents according to the final two characters

My method for collecting files from a folder involves using some Smarty code: {assign var=files value="uploads/Documenten/GPS-Tracks/*.html"|glob} {if count($files)} <ul> {foreach from=$files item='file'} {assign v ...

phphtmlsmarty3

Having trouble with the Slide Toggle menu closing unexpectedly?

$('span.nav-btn').click(function () { $('ul#menu').slideToggle(); }) $(window).resize(function () { if ( $(window).width() > 900) { $('ul#menu').removeAttr('style') } }); $('spa ...

javascriptjqueryhtmlcss

Is it possible to have a button within a table that, when clicked, opens a card overlaying the entire table?

I'm having an issue with a table and card setup. When I click the button in the table, the card that appears only covers part of the table. I want it to cover the entire table area based on the content inside the card. How can I make this happen? I&a ...

htmlcssangulartypescript

Having trouble adding your own styling to bootstrap-4 using a custom CSS file?

Here is the code I used to connect my two stylesheets, with the custom css file being linked second as per what I believe is the correct way to do it. <!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href=" ...

htmlcssflaskbootstrap-4styling

numerous inquiries regarding my CSS header navigation bars

As someone who is new to CSS, I find myself struggling to grasp the correct approach. Online examples vary and leave me confused. Specifically, I have questions about my markup but overall, am I doing things correctly? I feel like my CSS code is bloated. ...

htmlcsscss-floatoverflow

Tips for creating two lines of text within one line using CSS

My explanation skills are not the best. I have the words "Tasty Burger" stacked on top of each other, but I want them to be on a single line. .footer-container { margin: 25px 0; display: flex; gap: 3rem; align-items: center; justif ...

htmlcssflexbox

Only one specific SVG tag is affected by the CSS stylesheet

I'm encountering an issue with my web page that has multiple SVG tags. Each SVG tag includes a block of style tags containing CSS styles for the respective SVG element. The problem is that these styles seem to leak into the overall global styles. For ...

csshtmlsvg

What reasons could explain why the more efficient approach of offering an initial portion of data is not faster in practice?

My website contains numerous pages with a plethora of small images that need to be loaded. To enhance user experience, I devised two methods to first display a subset of the content without waiting for the entire page to load. The data is stored in a .json ...

jqueryhtmljson

How can I modify the appearance of a slider's range?

I'm struggling with customizing the style of a price slider input range. No matter what I do, the changes don't seem to take effect. Can anyone pinpoint where I may be going wrong? Appreciate any guidance on this! Thank you! <div class=" ...

javascripthtmljquerycssslider

The previous and next buttons are displaying side by side rather than being positioned at the outer edges

I am having an issue where the prev and next buttons are displaying next to each other instead of at the edge of the div. Can someone please assist me in fixing this problem? Below is the provided HTML code: <div id ="moreOption_80322271" class="m ...

htmlcss

Get notified via email when submitting a form on a PHP contact form

I am a front-end developer and do not have experience with PHP. I am trying to set up a contact form on my website using an example from htmldog. Here is the current code snippet: <form action="contact.php" method="post"> <div class="c ...

phphtmlemailpost

Scrollable Tailwind components

I am working on creating a page layout similar to this design: here is what I want to achieve The goal is to have a simple homepage with a navbar and split screen. The challenge is to prevent the entire page from scrolling normally and enable independent ...

htmlcsstailwind-css

What is the method to choose an invisible link without an identifier using Selenium WebDriver?

I am attempting to click on the link labeled 'User Requested'. This link only appears when hovering over the menu. This is the HTML code: <ul class="k-widget k-reset k-header k-menu k-menu-horizontal" id="menu" data-role="menu" tabindex="0" ...

phphtmlseleniumxpathselenium-webdriver

In PHP, the hidden input type doesn't always provide true concealment within a form if the value being passed

I am attempting to populate a hidden input field with the value of an XML string generated from an array. However, when I set the hidden field value using the XML string, it is being displayed in the HTML output. Surprisingly, if I use plain text as the va ...

phphtmlcodeigniter

How can you define & specify parameters for iframe using CSS?

Is there a way to style the parameters of an <iframe> using CSS? I am trying to embed multi-track audio from archive.org. For example, like this: <iframe src="https://archive.org/embed/art_of_war_librivox​&playlist=1​&list_height=200 ...

cssiframe

Trigger the callback function once the datatables DOM element has finished loading entirely

Hello there! I have a question regarding datatables. Is there any callback function available that is triggered after the datatables DOM element has finished loading? I am aware of the callbacks fnInitComplete, but they do not serve my purpose. Specificall ...

javascriptjqueryhtmlcssdatatables

Modifying CSS styles in real-time according to the present data

Is there a way to dynamically change CSS values based on current CSS values? For example, instead of explicitly setting different values like this: .test{ margin-top:100px; } .test:hover{ margin-top:90px; } Is it possible to achieve the same eff ...

css