CSS：帶有標題

Question

內容之後/之前，我可以做

div:after { 
    content: "hello" 
} 

但我可以有hello文字與標題，這樣，當我用鼠標懸停它，則顯示的標題？

感謝

Answer 1

你並不需要一個僞元素：

JSFiddle Demo

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

但是，如果你需要使用一個僞元素

JSFiddle Demo (2)

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

用途：

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

Answer 3

的規避這一點，是有兩個僞元素。

例如，::後是主元件和::之前將顯示在懸停被和作用就像一個標題。

另外，您可以使用javascript或jQuery代碼來檢測僞元素上的鼠標事件。

Demo

貝婁是演示的解釋：

$('.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>