CSS: Vorher/Nachher-Inhalt mit dem Titel

Question

I

div:after { 
    content: "hello" 
} 

tun kann, aber ich habe den hello Text mit einem Titel, so dass, wenn ich ihn mit der Maus bewegen, wird der Titel angezeigt?

Dank

Answer 1

Sie brauchen keine Pseudoelement für das:

JSFiddle Demo

<p class="hover-me" title="I Show up on Hover">Some Text</p> 

Wenn Sie jedoch ein Pseudo-Element

JSFiddle Demo (2)

verwenden müssen

HTML

<p class="hover-me" data-title="I Show up on Hover">Some Text</p> 

CSS

p { 
    background:lightblue; 
    padding:15px; 
    margin:15px; 
    position: relative; 
} 

p:hover:after { 
    position: absolute; 
    content:attr(data-title); 
    left:0; 
    top:0; 
    width:200px; 
    height:1.25rem; 
    background-color: blue; 
    color:white; 
} 

Answer 2

Verwendung:

div:hover:before{ 
    content: "Bye"; 
      } 

Answer 3

Eine Abhilfe für dieses ist zwei Pseudo-Elemente zu haben.

Zum Beispiel des :: nach ist das Hauptelement und die :: vor wird auf schweben gezeigt werden und wirkt wie ein Titel.

Sie können auch Javascript oder jQuery-Code verwenden, um Mausereignisse über das Pseudoelement zu erkennen.

Demo

Bellow ist die Demo-Erklärung:

$('.alert').on('mousemove', function(e) { 
 
    if (e.offsetX > (this.offsetWidth - 42)) { //42 is the ::after element outerWidth 
 
     $(this).addClass('hover'); 
 
    } else { 
 
     $(this).removeClass('hover'); 
 
    } 
 
}).on('mouseleave', function(e) { 
 
    $(this).removeClass('hover'); 
 
}).on('click', function(e) { 
 
    if (e.offsetX > (this.offsetWidth - 42)) { //42 is the ::after element outerWidth 
 
     $(this).remove(); 
 
    } 
 
});

.alert { 
 
    padding: 15px; 
 
    margin: 50px 0 20px; 
 
    border: 1px solid transparent; 
 
    border-radius: 4px; 
 
    position: relative; 
 
    color: #a94442; 
 
    background-color: #f2dede; 
 
    border-color: #ebccd1; 
 
    font-size: 0.85em; 
 
    transition: all 1s; 
 
} 
 
.alert::after, .alert::before { 
 
    content: 'X'; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    width: 40px; 
 
    height: 100%; 
 
    font-size: 0.85em; 
 
    padding: 0; 
 
    line-height: 40px; 
 
    text-align: center; 
 
    font-weight: 900; 
 
    font-family: cursive; 
 
    cursor: pointer; 
 
} 
 
.alert::before { 
 
    display: none; 
 
    content: 'This is a Title'; 
 
    top: -105%; 
 
    width: auto; 
 
    border: inherit; 
 
    border-radius: inherit; 
 
    padding: 0 0.4em; 
 
    background: rgba(0, 0, 0, 0.48); 
 
    color: white; 
 
} 
 
.alert.hover::after { 
 
    color: white; 
 
    filter: sepia(10%); 
 
    transform: scale(1.1); 
 
    border-radius: inherit; 
 
    border: inherit; 
 
    background: inherit; 
 
} 
 
.alert.hover::before { 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="alert"> 
 
    <strong>Hover</strong> over X to display the title. 
 
</div>