懸停後，文字似乎總是顯示

我有兩個div和一個在另一個之上。 div有一個span與文本是省略號，我想要做的是當鼠標懸停到span，顯示文本。但是現在，第一次盤旋後，下一次當你徘徊在頂端span時，第二個span的文本仍然存在，有點像transparent。懸停後，文字似乎總是顯示

編輯：我是用CSS之前，而不是jQuery的，但最近的Chrome更新後，我的懸停不工作，所以我必須使用jQuery來代替。

老CSS：

.hover:hover { 
overflow: visible; 
white-space: normal; 
min-width: 200px; 
background-color: #E5E5E5; 
z-index: 1000; 
position: relative; 
font-family: Verdana;

}

這裏是jsFiddle

$('.hover').on('mouseover', function() { 
 
    $(this).css({ 
 
    'overflow': 'visible', 
 
    'white-space': 'normal', 
 
    'min-width': '200px', 
 
    'background-color': 'rgba(229,229,229,1)', 
 
    'z-index': '100', 
 
    'position': 'relative', 
 
    'font-family': 'Verdana' 
 
    }) 
 
}) 
 

 
$('.hover').on('mouseleave', function() { 
 
    $(this).css({ 
 
    'font-size': '15px', 
 
    'color': '#15428B', 
 
    'background-color': 'rgba(255,255,255,0)', 
 
    'width': '200px', 
 
    'text-overflow': 'ellipsis', 
 
    'white-space': 'nowrap', 
 
    'overflow': 'hidden' 
 
    }) 
 
})

.box { 
 
    height: 20px; 
 
    float: left; 
 
    clear: left; 
 
    border: 1px solid black; 
 
    width: 200px; 
 
} 
 

 
.hover { 
 
    font-size: 15px; 
 
    color: #15428B; 
 
    width: 200px; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='box'><span class='hover'>Hello World!Hello World!Hello World!Hello World!Hello World!Hello World 
 
</span></div> 
 
<br> 
 
<div class='box'><span class='hover'>Hello World!Hello World!Hello World!Hello World!Hello World!Hello World 
 
</span></div>

所以，正如我所說，它可能是一個鉻問題。我卸載了我的Chrome瀏覽器，並且正在使用Chrome Canary，它使用舊的CSS方法和@ Toastrackenigma的方法

來源

2017-08-08 lilixiaocc

正如OP在此答案的評論中所述（但不是在他的問題中），純CSS不是他的選擇。雖然我現在還不能100％確信有關此要求，這裏是一個純粹的jQuery解決方案：

\t $('.hover').on('mouseover', function(){ 
 
\t \t $(this).css({ 
 
\t \t \t \t 'overflow': 'visible', 
 
\t \t \t \t 'white-space': 'normal', 
 
\t \t \t \t 'min-width': '200px', 
 
\t \t \t \t 'background-color': 'rgba(229,229,229,1)', 
 
\t \t \t \t 'z-index': '100', 
 
\t \t \t \t 'position': 'relative', 
 
\t \t \t \t 'font-family': 'Verdana' 
 
\t \t }) 
 
\t }) 
 

 
\t $('.hover').on('mouseleave', function(){ 
 
\t \t $(this).removeAttr("style") 
 
\t })

.box { 
 
    height: 20px; 
 
    float:left; 
 
    clear: left; 
 
\t border:1px solid black; 
 
    width: 200px; 
 
} 
 

 
.hover { 
 
    \t font-size: 15px; 
 
\t color: #15428B; 
 
\t width: 200px; 
 
\t text-overflow: ellipsis; 
 
\t white-space:nowrap; 
 
\t overflow: hidden; 
 
}

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

 
<div class='box'> 
 
    <span class='hover'>Hello World!Hello World!Hello World!Hello World!Hello World!Hello World 
 
    </span> 
 
</div> 
 
<br> 
 
<div class='box'> 
 
    <span class='hover'>Hello World!Hello World!Hello World!Hello World!Hello World!Hello World 
 
    </span> 
 
</div>

來源

2017-08-08 19:33:04 Toastrackenigma

爲什麼我使用jQuery的原因是因爲最近鉻更新後，我的懸停後，每一次，文本消失和開發工具，文本不隱藏。所以我切換到jQuery。 – lilixiaocc

@lilixiaocc所以，你不能使用普通的CSS來做到這一點？這應該在你的問題中說明，因爲這是你的問題的明顯解決方案。你應該回去編輯它。 – Toastrackenigma

@lilixiaocc你的評論沒有任何意義 - 從最近的chrome更新*開始，以及你使用jQuery的原因如此平庸。 –

嘗試是這樣的：

.box:first-child:hover ~ .box > span { 
    display: none; 
}

https://jsfiddle.net/jjn522xz/1/

來源

2017-08-08 19:36:50

正如OP在我的回答的評論中所說的，他不能使用CSS來做到這一點。 – Toastrackenigma

@ Toastrackenigma，謝謝你讓我知道。我沒有看到這個評論。作爲一般信息，我暫時將答案留在原地。 –

是的，它實際上是一個非常好的解決方案 - 我被抓出來做一個CSS的答案了。似乎有點怪異的TBH要求。 – Toastrackenigma

第一，使用text-overflow: ellipsis與固定的width,white-space: nowrap;和overflow:hidden將不起作用，除非您將span標籤定義爲display: inline-block或display: block。

其次，重疊由於不使用z-index和position: relative發生。

我已在相應的JSFiddle一些變化，請檢查。

PS：它無關，與最新的Chrome更新。

來源

2017-08-14 10:22:09 vivekkupadhyay

懸停後，文字似乎總是顯示

回答

相關問題