首頁猿問如何將文本顯示到與JS或Jquer...

如何將文本顯示到與JS或Jquery懸停在一起的相應div容器？

JavaScript

嚕嚕噠 2022-08-04 10:02:03

我正在嘗試顯示當鼠標懸停在div屬性中的文本時。我有三個div框，每個框中有三個文本。我知道我只能通過CSS來完成這項工作，但我是編碼新手，并且正在努力更好地學習JS和Jquery。我一開始使用純JS進行練習，起初，我只能在懸停時顯示第一個框，而不能顯示其他兩個框，當我打印出vars到控制臺時，我注意到它只拉動了divs的第一個元素，那是當我切換到.querySelectorAll以獲取所有三個元素時，但現在我不知道如何使用this/event.target/event.currentTarget。我假設這就是我用來讓目標元素顯示的內容，但我不知道如何使用它們。let text = document.querySelectorAll('a div');let pic = document.querySelectorAll('.boxcontainer a')pic.addEventListener("mouseenter", function() { this.style.visibility = 'visible';});pic.addEventListener("mouseleave", function() { this.style.visibility = 'hidden';});.boxcontainer { width: 30%; height: 50%; position: fixed; display: flex; flex-direction: column; z-index: 100;}.boxcontainer a { box-shadow: -9px 12px 7px 0px rgba(0, 0, 0, 0.336); margin: 10px; padding-top: 10%; padding-bottom: 10%; text-decoration: none; color: white; display: flex; justify-content: center; align-items: center;}.boxcontainer a:hover { transform: scale(1.1); color: white;}#text { visibility: hidden;}<div class="boxcontainer"> <a href="asia.html" style="background-color:#46515a;"> <div id='text'>asia.</div> </a> <a href="americas.html" style="background-color: #2d343a;"> <div id='text'>americas.</div> </a> <a href="europe.html" style="background-color: #1a1f22;"> <div id='text'>europe.</div> </a></div>

查看完整描述

3 回答

慕容3067478

TA貢獻1773條經驗獲得超3個贊

我可以看到的直接問題是你有3個具有相同ID的div。ID 應該是唯一的。將 id 更改為類，并將 javascript 引用更改為類：

let text = document.querySelectorAll(".text");

反對回復 2022-08-04

紅顏莎娜

TA貢獻1842條經驗獲得超13個贊

我得到了我的答案，感謝任何幫助過我的人

jQuery

$('.text').hide();

$(".boxcontainer a").on('mouseenter', function() {

$(this).find('.text').fadeIn(300);

});

$(".boxcontainer a").on('mouseleave',function() {

$(this).find('.text').hide();

});

斷續器

<a href="americas.html" style="background-color: #2d343a;"> <div class='text'>americas.</div></a>

<a href="europe.html" style="background-color: #1a1f22;"><div class='text'>europe.</div></a>

</div>

斷續器

.boxcontainer{

width: 30%;

height: 50%;

position: fixed;

display: flex;

flex-direction: column;

z-index: 100;

}

.boxcontainer a{

box-shadow: -9px 12px 7px 0px rgba(0, 0, 0, 0.336);

margin: 10px;

padding-top: 10%;

padding-bottom: 10%;

text-decoration: none;

color: white;

display: flex;

justify-content: center;

align-items: center;

}

.boxcontainer a:hover{

transform: scale(1.1);

color: white;

}

反對回復 2022-08-04

梵蒂岡之花

TA貢獻1900條經驗獲得超5個贊

您正在 DOM 訪問上使用 jQuery 功能。

你不能將鼠標懸停在隱藏的東西上，所以我的答案將div移出錨點。

正如J Doe所指出的，文本ID應該更改為類，因為ID需要是唯一的 - 這與實際問題無關。

這是vanilla版本 - 我通常會委托，但在這種情況下，我們需要在每個鏈接上都有一個eventListener

const overAndOut = e => {

const tgt = e.target;

if (tgt.tagName === "A") {

tgt.nextElementSibling.classList.toggle('text', e.type === "mouseleave")

}

};

[...document.querySelectorAll('#boxcontainer a')].forEach(link => {

link.addEventListener('mouseover', overAndOut)

link.addEventListener('mouseleave', overAndOut)

})

.boxcontainer {

width: 30%;

height: 50%;

position: fixed;

display: flex;

flex-direction: column;

z-index: 100;

}

.boxcontainer a {

box-shadow: -9px 12px 7px 0px rgba(0, 0, 0, 0.336);

margin: 10px;

padding-top: 10%;

padding-bottom: 10%;

text-decoration: none;

color: white;

display: flex;

justify-content: center;

align-items: center;

}

.boxcontainer a:hover {

transform: scale(1.1);

color: white;

}

.text {

visibility: hidden;

}

<a href="americas.html" style="background-color: #2d343a;">Americas</a>

<div class='text'>Americas.</div>

<a href="europe.html" style="background-color: #1a1f22;">Europe</a>

<div class='text'>Europe.</div>

</div>

jQuery：

$('#boxcontainer a').on("mouseenter", function() {

$(this).next().removeClass("text")

})

.on("mouseleave", function() {

$(this).next().addClass("text")

});

.boxcontainer {

width: 30%;

height: 50%;

position: fixed;

display: flex;

flex-direction: column;

z-index: 100;

}

.boxcontainer a {

box-shadow: -9px 12px 7px 0px rgba(0, 0, 0, 0.336);

margin: 10px;

padding-top: 10%;

padding-bottom: 10%;

text-decoration: none;

color: white;

display: flex;

justify-content: center;

align-items: center;

}

.boxcontainer a:hover {

transform: scale(1.1);

color: white;

}

.text {

visibility: hidden;

}

<a href="americas.html" style="background-color: #2d343a;">Americas</a>

<div class='text'>Americas.</div>

<a href="europe.html" style="background-color: #1a1f22;">Europe</a>

<div class='text'>Europe.</div>

</div>

反對回復 2022-08-04

3 回答
0 關注
176 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何將文本顯示到與JS或Jquery懸停在一起的相應div容器？

如何將文本顯示到與JS或Jquery懸停在一起的相應div容器？

3 回答

添加回答

如何將文本顯示到與JS或Jquery懸停在一起的相應div容器？