將鼠標懸停在另一個div上時更改div

我試圖在鼠標懸停在另一個div上時更改一個div的可見性。當觀衆懸停在圖像上時，我希望展開的圖像展開，而其他圖像的文本框不可見。這是我的HTML：將鼠標懸停在另一個div上時更改div

<div id="Image1" class="Images"> 
     <img src="img/IMG_0212.JPG" width=200px height=auto> 
     <p> Image 1 text </p> 
    </div> 

    <div id="Image2" class="Images"> 
     <img src="img/IMG_0169.JPG" width=200px height=auto> 
     <p> Image 2 text </p> 
    </div>

我的CSS：

#Image1:hover .Images { 
    transform: scale(0.5); 
    visibility: hidden; 
} 

#Image1:hover #Image1 { 
    transform: scale(1.5); 
    visibility:visible; 
}

請多多包涵，因爲我仍然相當新的HTML和CSS。到目前爲止，我發現的所有東西似乎都需要divs嵌套或使用jquery。有什麼方法可以用HTML和CSS來完成這個任務嗎？

來源

2014-11-03 Kelly

也許你可以使用前後影響到所有的圖像之外目前正在盤旋。 – 2014-11-03 05:46:15

您可以使用jQuery hover來實現這一點 -

這裏是小提琴 - DEMO

懸停需要2個回調函數 - $（selector）.hover（handlerIn，handlerO ut）;

handlerIn在您將鼠標光標放入時調用，handlerOut在光標移出時調用。

讓我知道你是否有任何疑問。

來源

2014-11-03 06:11:23 Ajey

很容易，如果你使用JavaScript，你可以做這樣的事情：

$('#Image1').hover(function(){ 
    $('#Image2').hide(); 
    enlarge_image($('#Image1')); 
}); 
enlarge_image= function(image_arg){ 
//change height and width here 
};

希望它可以幫助

來源

2014-11-03 05:48:25 Aameer

試試這個使用jQuery：

$("img").mouseenter(function(){ 
    $("img").hide(); 
    $(this).css("transform" , "scale(1.5)"); 
    $(this).show(); 
}).mouseout(function(){ 
    $(this).css("transform" , "scale(0.5)"); 
    $("img").show(); 
});

希望這有助於。

來源

2014-11-03 06:27:21

不，沒有辦法只用CSS來完成。

你可以用JQuery來做，就像其他答案提出的一樣。如果你不喜歡使用庫，你可以使用純Javascript。

首先，創建2個類：.own_hover和.other_hover。

在你的CSS創建你已經擁有相同的風格，但把它們應用到這些clases：

.other_hover { 
    transform: scale(0.5); 
    visibility: hidden; 
} 

.own_hover { 
    transform: scale(1.5); 
    visibility:visible; 
}

（請注意，這CSS將使其它圖像不可見的，而不是文本框，您可能希望。改變它以實現所描述的行爲）。

而現在只用一些純JavaScript你添加一個事件監聽到你的圖像：

document.getElementsByClassName("Image").forEach(function(e){ 
    e.addEventListener("mouseenter", imageChanger); 
    e.addEventListener("mouseleave", imageEqualizer) 
}

然後創建一個功能，增加了相應的類（後來刪除它們）。

function imageChanger(evt){ 
    evt.target.classList.add("own_hover"); 
    document.getElementsByClassName("Image").forEach(function(e){ 
     if(e != evt.target) e.ClassList.add("other_hover")}); 
} 

function imageEqualizar(evt){ 
    document.getElementsByClassName("Image").forEach(function(e){ 
     e.ClassList.remove("other_hover"); 
     e.ClassList.remove("own_hover"); 
     }); 
}

只有15行左右的JS，你可以完成你想要的。

我還沒有嘗試過，但這是我將如何解決您的問題。您需要嘗試，失敗，調試並重新開始，直到您找到所需的解決方案。

並請，如果圖像列表不改，不要每次查詢DOM，嘗試做一些像

var images = document.getElementsByClassName("Image")

來源

2014-11-03 07:20:07 Jofre

將鼠標懸停在另一個div上時更改div

回答

相關問題