如何在鼠標移出或懸停後顯示隱藏的div

嗨，大家可以有人幫我在這裏我想讓一個隱藏的div顯示後，我觸發事件顯示，我刪除該div上的鼠標這裏是我的代碼如何在鼠標移出或懸停後顯示隱藏的div

<div id='MainContainer'> 
    <div id='btn-img' onmouseover='DisplayHidden()'>content 1</div> 
    <div id='container2'>content 2</div> 
</div> 

function DisplayHidden() 
{ 
    $('#container2').show(); 
}

是否有可能？

來源

2017-10-16 Kyle

意味着，如果你點擊mainContainer上和它的孩子連連話，那可就節目clickin在同一格的權利，如果其他容器，然後警報（「不」） –

@Dipak chavda是的，這是正確的 – Kyle

我更喜歡這種方式，因爲如果你想添加更多的屬性和參數比較，你可能很容易地添加它和屬性綁定動力。

$(document).ready(function(){ 
 
     $("#MainContainer > div").on("click",function(e){  
 
      if(false === !!$(this).attr('data-click')){  \t 
 
       $(this).attr("data-click", true); 
 
       alert('No'); 
 
      }else{   
 
       alert('Clicking on same div'); 
 
      } 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='MainContainer'> 
 
     <div id='container1'>content 1</div> 
 
     <div id='container2'>content 2</div> 
 
    </div>

來源

2017-10-16 06:01:56

謝謝你的好回答！像魅力一樣工作 – Kyle

@kyle：這就是社區建設的原因 –

var lastClick = null; 

$('div#MainContainer div').click(function() { 

    var clickedId = $(this).attr('id'); 

    if (clickedId == lastClick) { 
     alert('Clicked the same div'); 
    } 
    else { 
     alert('Clicked on a different div'); 
     lastClick = clickedId; 
    } 
});

來源

2017-10-16 05:48:48

這裏簡單的解決方案與普通的JavaScript：

var g_lastTarget = null 

var g_handleClick = function(e) { 
    var target = e.currentTarget 

    if (g_lastTarget === target) { 
    alert('You clicked the container twice. Container ID = ' + target.id) 
    } 

    g_lastTarget = target 
} 

var c1 = document.getElementById('container1') 
var c2 = document.getElementById('container2') 

c1.addEventListener('click', g_handleClick) 
c2.addEventListener('click', g_handleClick)

來源

2017-10-16 05:50:09 d3L

創建一個共同類&使用querySelectorAll來選擇所希望的元件。

然後遍歷它將eventListener方法附加到它。創建一個變量來存儲當前單擊的元素的ID。隨後點擊檢查變量值和id是否相同。如果相同，則發出警報。

var getElements = document.querySelectorAll(".elem"); 
 
var clickedElem = ""; 
 
getElements.forEach(function(item) { 
 
    item.addEventListener('click', function() { 
 
    if (item.id === clickedElem) { 
 
     alert('Clicking on same div') 
 
    } else { 
 
     clickedElem = item.id 
 
    } 
 

 
    }) 
 
})

<div id='MainContainer'> 
 
    <div id='container1' class="elem">content 1</div> 
 
    <div id='container2' class="elem">content 2</div> 
 
</div>

來源

2017-10-16 05:52:06 brk

這裏是你能做什麼，用純JavaScript。

綁定容器元素上的click事件，並使用event.target屬性檢查以前的click元素並採取相應的操作。

Event.target documentation on MDN

document.addEventListener("DOMContentLoaded", function() { 
 
    var prevElement = null; 
 
    document.querySelector("#MainContainer").addEventListener("click", function(event) { 
 
    if (prevElement === event.target) { 
 
     console.log("Yes") 
 
    } else { 
 
     console.log("No"); 
 
    } 
 
    prevElement = event.target; 
 
    }); 
 
});

<div id='MainContainer'> 
 
    <div id='container1'>content 1</div> 
 
    <div id='container2'>content 2</div> 
 
</div>

來源

2017-10-16 06:03:37 Sreekanth

如何在鼠標移出或懸停後顯示隱藏的div

回答

相關問題