Display updated text on hover over button panel

Question

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?

html css button hover

Answer 1

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

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 3

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 4

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 5

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.

Answer 6

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.

Display updated text on hover over button panel

Answer №1

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

Visit the CodePen link

UPDATE: Duplicating the following:

View in CodePen

Answer №2

Answer №3

Building a Responsive Menu

CSS Solution

Similar questions

Designing a webpage compatible across different browsers that features an image positioned relatively over two rows of a table

Steps to easily modify the color of Font Awesome stacked icons when hovering over them

Transitioning from Bootstrap 4 to Bootstrap 5 raises concerns about container compatibility

Should scripts be replayed and styles be refreshed after every route change in single page applications (SPA's)? (Vue / React / Angular)

Tips on creating adaptable images for mobile viewing

What can be done to prevent inputs from shifting when resizing a browser window?

Utilizing Node.JS Nodemailer for sending emails with extensive HTML code

Mobile Image Sizing with Bootstrap 4 Cards

What steps are involved in creating a mobile web app using Visual Studio 2012, jQuery, and ASP.NET MVC?

Having trouble accessing the information stored in the Firebase Database?

Content on the right floating underneath content on the left

Expanding your selection capabilities using BeautifulSoup

minimize the size of the image within a popup window

What causes the unset width or height to impact object-fit, and is there a workaround for this issue?

Troubleshooting issue: Bootstrap not loading with custom CSS on Flask platform

Creating a textbox with pre-filled content

Can you provide guidance on how to successfully transfer an array of JSON objects from the script section of an HTML file to the JavaScript

Shrink video size directly in the browser using JavaScript and HTML5 before storing or sharing it

Styled-components is not recognizing the prop `isActive` on a DOM element in React

Can the tab button be used to move to the next field?