使用jQuery事件控制HINT.css庫工具提示的顯示

我使用的是HINT.css，並希望在單擊div/class時隱藏提示，並在div/class外使用鼠標時打開提示。我認爲我在這裏非常簡單。我很驚訝它不起作用，我錯過了什麼？使用jQuery事件控制HINT.css庫工具提示的顯示

<div class="promo"> 
    <div class="offer hint--top hint--info hint--rounded hint--info" 
    data-hint="PUT SOME COOL COPY, TO GET PEOPLE TO CLICK!!!"></div> 
</div> 

$(document).ready(function() { 
    $('.promo').on('click','.offer', function(){ 
    $(this).hide(); 
}); 
    $('.promo').on('mouseleave','.offer', function(){ 
    $(this).show(); 
}); 
}); //end of document ready

來源

2013-04-10 Antonio Pavicevac-Ortiz

哪部分不工作？它會給你任何JavaScript錯誤？檢查您的控制檯併發布結果。 – Derek 2013-04-10 19:42:36

你有包括jQuery嗎？ – 2013-04-10 19:43:08

@Derek，沒有錯誤。 – 2013-04-10 19:53:09

您的問題是由其中HINT.css庫工作的方式產生。工具提示是僞元素，所以雖然添加的jQuery點擊事件會隱藏元素，但由於HINT.css代碼:hover仍然適用於該元素，所以它會立即再次出現。

但是我們可以通過在僞元素中添加一個display:none規則來添加或者添加功能，作爲jQuery添加或刪除的類。

例如：

的JavaScript

CSS

.fakeHide[data-hint]:before, .fakeHide[data-hint]:after { 
    display:none; 
}

HTML

<div class="promo"><span class="offer hint--bottom hint--rounded hint--info" data-hint="PUT SOME COOL COPY!!">I am a promotion - hover over me</span></div>

這是一個很難演示。出於某種原因，jsFiddle和jsBin都不會在編輯模式下顯示工具提示，但它們在實時預覽模式下工作。

See demo或edit demo - 並記住它只能在實時預覽模式下出現！

來源

2013-04-10 20:49:57 andyb

非常感謝！我將要做一些關於僞元素的閱讀！ – 2013-04-10 21:34:14

樂意提供幫助。這是一個很好的問題:-)至於僞元素，我的建議是「不走的DOM尋找他們」 - 看到http://stackoverflow.com/a/5041526/637889 – andyb 2013-04-10 21:37:33

你所提到的代碼不正是你想要的..

[http://jsfiddle.net/MjFRe/][1]

[1]：演示的jsfiddle

來源

2013-04-10 19:45:48 insomiac

這個演示沒有顯示任何內容，應該是對這個問題的評論。 – andyb 2013-04-10 19:53:00

只要你點擊div它會隱藏div，但同時它會觸發mouseleave在div上你再次調用show。那爲什麼它永遠不會被隱藏。

JSFIDDLE

來源

2013-04-10 19:51:32 Anoop

'+ 1'用於解釋問題是什麼 – andyb 2013-04-10 19:53:22

小提琴是空白 – defau1t 2013-04-10 19:53:40

@ defau1t更新小提琴的網址 – Anoop 2013-04-10 19:55:04

使用jQuery事件控制HINT.css庫工具提示的顯示

回答

相關問題