How to Create a Box When Mouse Over Text in Pure CSS

How to create a box when mouse over text in pure CSS?

You can write like this:

CSS

span{
    background: none repeat scroll 0 0 #F8F8F8;
    border: 5px solid #DFDFDF;
    color: #717171;
    font-size: 13px;
    height: 30px;
    letter-spacing: 1px;
    line-height: 30px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    text-transform: uppercase;
    top: -80px;
    left:-30px;
    display:none;
    padding:0 20px;

}
span:after{
    content:'';
    position:absolute;
    bottom:-10px;
    width:10px;
    height:10px;
    border-bottom:5px solid #dfdfdf;
    border-right:5px solid #dfdfdf;
    background:#f8f8f8;
    left:50%;
    margin-left:-5px;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}
p{
    margin:100px;
    float:left;
    position:relative;
    cursor:pointer;
}

p:hover span{
    display:block;
}

HTML

<p>Hover here<span>some text here ?</span></p>

Check this http://jsfiddle.net/UNs9J/1/

How to create a css hoverover box with two section

Very simple. You change html:

<div class="div-hover">Hover here
  <div class="div-tooltip">
    <div class="tooltip-header">some text here ?</div>
    <div class="tooltip-body">some text body some text body</div>
  </div>
</div>

Full code is here

pure CSS to hover over a div hide the content and then display new text

here's my solution for you. Hope it will meet up your requirements. I just made some changes in following blocks. Feel free to inform if you face any problem.

.feature .details {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display:block;
    opacity: 0;
    z-index: 15;
}

.feature:hover .details {
    opacity: 1;
    transition: all 0.33s ease .2s;
} 

.feature {    position: relative;    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);    padding: 5%;    text-align: center;    box-sizing: border-box;}
.feature h2 {    font-size: 1.5em;    color: #006699;    margin-top: 0;    margin-bottom: 0.5em;}
.feature a {    text-decoration: none;}
.feature .icon {    font-size: 3em;    color: #575757;}
.feature:before {    content: "";    position: absolute;    bottom: 0px;    left: 0px;    width: 100%;    height: 0;    background-color: #003366;    transition: all 0.33s ease;    z-index: 10;}
.feature .details {    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    display:block;    opacity: 0;    z-index: 15;}
.feature:hover:before {    height: 100%;    opacity: 1;    box-shadow: inset 0px 0px 2px 2px rgba(75,179,219,0.75);    z-index: 10;}
.feature:hover .details {    opacity: 1;    transition: all 0.33s ease .2s;}

<div class="feature h_medium bg-gray radius-2">        <div class="icon mb-15">            <i class="fas fa-people-carry"></i>        </div>        <h2>Main Title</h2>        <div class="details">            <h2>Main Title (again)</h2>            <p>Some level of content that describes the title</p>    </div>    </div>

How to create tooltip that stay on mouseover in pure css?

Unfortunately adding a permanent state on hover can't be accomplished with pure CSS, you will have to add a small bit or javascript of jQuery. Something like:

$('a.tooltips span').on('mouseover',function(){
    $(this).css({
        "visibility": "visible",
        "opacity": "0.8"
        // more styles go here
    });
});

Pure css gradually change text on hover

Code: http://codepen.io/anon/pen/Qbdvob

This effect works by using hover state to set opacity of absolutely positioned elements' opacity on and off. And they have transition applied so fade in and out effect is achieved.

Jade styled html:

.widget
  span view as:
  input(type='checkbox',id='toggle')
  label.select(for='toggle')
    .default others
    .hovered you

Css:

* {
  margin: 0;
  padding: 0;
}
.widget {
  font-family: Open Sans;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.widget span {
  vertical-align: top;
  line-height: 30px;
}
label.select {
  user-select: none;
  cursor: pointer;
  background-color: #3ce;
  color: #fff;
  border-radius: 2px;
  width: 60px;
  vertical-align: top;
  position: relative;
  height: 30px;
  display: inline-block;
}
label.select .default,
label.select .hovered {
  transition: opacity 1s;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
}
label.select .hovered {
  opacity: 0;
}

label.select:hover {
  background-color: #36f;
}

label.select .default {
  opacity: 1;
}
label.select .hovered {
  opacity: 0;
}
label.select:hover .default {
  opacity: 0;
}
label.select:hover .hovered {
  opacity: 1;
}

How to add text when hovering

There are two ways to accomplish this:

1. Pure HTML and CSS (no Javascript or JQuery)

See This Fiddle

First, add your text and icons into the HTML. It looks like you can add them inside the <figure> block.

Second, add a CSS rule that only shows these elements when the figure is :hover-ed Learn more about the :hover pseudo-class here

Third, tweak the position, or margins of the elements to get them to display where you want.

2. HTML and CSS and JQuery

See This Other Fiddle

Still add your HTML elements with a unique class (I used "hoverable").

Still set your CSS to hide these elements by default. Either visibility:hidden; or display:none;

Then add some JQuery which watches for the .mouseover() and .mouseout() events to toggle the visibility or display of the elements.

---

Related Topics