用鼠標點擊切換文本以在位置上顯示

我需要能夠點擊一個區域（框）並使一些文本出現，然後再次單擊頁面上的任何其他位置以使其消失。我開始將它懸停在盒子上，它工作正常。文本出現在鼠標懸停的位置。用鼠標點擊切換文本以在位置上顯示

這是我所得到的jsfiddle：http://jsfiddle.net/TW2Le/73/

我試圖改變:hover到:active，但它仍然無法正常工作。我應該做些什麼才能使其點擊顯示，點擊任何地方 - 其他來隱藏。

來源

2014-01-09 PhoonOne

因此，基本上你看起來ng在CSS中的點擊事件處理程序？ – adeneo

你不會從CSS獲得它。不過，這對JavaScript來說非常有用。 –

@adeneo是的，你能舉一個例子嗎？ – PhoonOne

有複選框黑客，使用隱藏的複選框一個標籤只捕獲CSS中的點擊，然後使用相鄰的兄弟選擇器來更改元素的可見性。

這使用CSS只捕捉點擊，不需要JavaScript：

.wrap { 
    outline: 1px dotted blue; 
    height: 107px; 
    width: 130px; 
    display: block; 
} 

.noshow, #click, #click:checked ~ .show {display : none;} 

.noshow { 
    color: #050505; 
    font-weight:bold; 
    text-align:justify; 
    line-height: 1em; 
    font-size:small; 
} 

#click:checked ~ .noshow { 
    display: block; 
}

FIDDLE

對於禁區外的任意位置單擊時恢復點擊jQuery的版本，你會做

$(function() { 
    $(document).on('click', function(e) { 
     if ($(e.target).closest('.wrap').length) { 
      $('.show').hide(); 
      $('.noshow').show(); 
     }else{ 
      $('.show').show(); 
      $('.noshow').hide(); 
     } 
    }); 
});

FIDDLE

來源

2014-01-09 14:56:07 adeneo

感謝這個不錯的例子，現在我試圖能夠點擊頁面上的其他任何地方以切換回「無點擊」，我必須添加什麼？ – PhoonOne

我不認爲你可以用CSS來做到這一點，這很難做，因爲CSS中沒有點擊事件。我也會添加一個javascript的答案 – adeneo

刪除您:hover CSS樣式

添加JavaScript處理點擊事件

$(document).ready(function(){ 
    $(".noshow").hide(); 
    $(".wrap").click(function(){ 
     $(".show").toggle(); 
     $(".noshow").toggle(); 
    }); 
});

這裏是提琴：http://jsfiddle.net/EU53E/

來源

2014-01-09 14:49:55 zavg

非常感謝，我該如何讓文字出現在頁面的右側？ – PhoonOne

簡單地...使用CSS :) – NoobEditor

只需將'text-align：right;'添加到'wrap'css類 – zavg

添加JavaScript和刪除懸停

$(function(){ 
     $(".noshow").hide(); 
     $(".wrap").on('click',function(){ 
     $(".noshow,.show").toggle(); 
     }); 
    });

來源

2014-01-09 14:55:40

用鼠標點擊切換文本以在位置上顯示

回答

相關問題