如何更換與僞類內容的DIV的內容上懸停

-1

body{ 
 
     font-size: 24px; 
 
     display: flex; 
 
     justify-content: center; 
 
     margin: 75px 0; 
 
    } 
 
    
 
    .button{ 
 
     
 
     padding: 1px 3px 2px; 
 
     font-weight: bold; 
 
     color: #ffffff; 
 
     text-transform: uppercase; 
 
     white-space: nowrap; 
 
     background-color: #bfbfbf; 
 
     border-radius: 3px; 
 
     text-decoration: none; 
 
     max-height: 24px; 
 
     
 
     } 
 
    
 
    .button:hover{ 
 
     display:"none"; 
 
     
 
     } 
 
    
 
    .button:hover:after{ 
 
     content: 'my second box'; 
 
     cursor: crosshair; 
 
     background-color: #46a546; 
 
\t \t 
 
     }

<body> 
 
    
 
    <div class="button">my first box</div> 
 

 
    
 
</body>

下面是一些jsfiddle鼓搗。我覺得我已經嘗試過所有的組合來完成這項工作！關於我需要對這段代碼進行的更改類型的任何想法，以便阻止原始框從一側移到另一側？

來源

2017-01-20 Don S

爲什麼不試試'顯示：無;'，而不是'顯示：「無」' ？ –

刪除引號是一個好的開始，但是我也看到'：hover：after'工作方式的問題，不確定它是否被用於這種方式。 – akousmata

刪除引號，您將在懸停時看到閃爍。看到這個答案http://stackoverflow.com/questions/5844622/how-to-make-a-div-disappear-on-hover-without-it-flickering-when-the-mouse-moves爲什麼。 – akousmata

如果您的目標是將.button中的內容替換爲關於懸停的虛擬課程的內容，那麼您需要引入另一個元素。當你隱藏一個元素時，它的僞元素也將被隱藏起來。您可以通過圍繞要隱藏的內容嵌套span並隱藏跨度，然後使用懸停時父元素的僞元素中的內容「替換」跨度內容來做到這一點 - 就像這樣。（PS - 你需要從display: "none";刪除引號 - 應該是display: none;代替）

body { 
 
    font-size: 24px; 
 
    display: flex; 
 
    justify-content: center; 
 
    margin: 75px 0; 
 
} 
 

 
.button span { 
 
    padding: 1px 3px 2px; 
 
    font-weight: bold; 
 
    color: #ffffff; 
 
    text-transform: uppercase; 
 
    white-space: nowrap; 
 
    background-color: #bfbfbf; 
 
    border-radius: 3px; 
 
    text-decoration: none; 
 
    max-height: 24px; 
 
    display: block; 
 
} 
 

 
.button:hover span { 
 
    display: none; 
 
} 
 

 
.button:hover:after { 
 
    content: 'my second box'; 
 
    cursor: crosshair; 
 
    background-color: #46a546; 
 
}

<div class="button"><span>my first box</span></div>

來源

2017-01-20 23:21:25

如何更換與僞類內容的DIV的內容上懸停

回答

相關問題