首頁猿問如何讓我的 ID 懸停在 id...

如何讓我的 ID 懸停在 id 所引用的 div 上

JavaScript

精慕HU 2022-07-01 16:36:16

代碼創建了 div，它們是方形黑框。懸停在正方形上時，正方形的 id 值應顯示在正方形的中心，當光標不再在正方形上時消失。- 任何想法如何做到這一點？let button = document.createElement("button")let text = document.createTextNode("Add Squares")let num = 1;let displayText = document.createTextNode("num");button.appendChild(text);window.addEventListener("DOMContentLoaded", function () { document.body.appendChild(button);});button.addEventListener("click", function () { let test = document.createElement("div") test.style.backgroundColor = "black"; test.style.width = "77px"; test.style.height = "77px"; test.style.display = "inline-block"; test.className = "squares"; test.id = num; console.log(num) onMouseover="displayQuote();" num++; document.body.appendChild(test);});

查看完整描述

3 回答

慕少森

TA貢獻2019條經驗獲得超9個贊

idCSS 可以通過在屬性中使用偽元素加載來為您處理這個問題（并且可以opacity更改:hover- 如果您愿意，您也可以更改display）：

let button = document.createElement("button")

let text = document.createTextNode("Add Squares")

let num = 1;

let displayText = document.createTextNode("num");

button.appendChild(text);

window.addEventListener("DOMContentLoaded", function () {

document.body.appendChild(button);

});

button.addEventListener("click", function () {

let test = document.createElement("div")

// Styles moved to CSS

test.className = "squares";

test.id = num;

console.log(num)

num++;

document.body.appendChild(test);

});

.squares {

background-color: black;

width: 77px;

height: 77px;

display: inline-block;

position: relative;

}

.squares::after {

content: attr(id);

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

display: flex;

justify-content: center;

align-items: center;

color: white;

opacity: 0;

}

.squares:hover::after {

opacity: 1;

}

反對回復 2022-07-01

千巷貓影

TA貢獻1829條經驗獲得超7個贊

你可以：

創建黑色 div 的子 div
將 id 添加到子 div
使子 div 顯示：無
使用 CSS 規則在 :hover 上顯示子 div

例子：

body {

background-color: #aaa;

padding: 1rem;

}

/* the black squares */

.squares {

background-color: black;

width: 77px;

height: 77px;

display: inline-block;

}

/* transparent overlay with ID */

.overlay {

background: transparent;

width: 77px;

height: 77px;

color: white;

justify-content: center;

align-items: center;

display: none;

}

/* show overlay on hover */

.squares:hover .overlay {

display: flex;

}

<body>

</div>

</body>

反對回復 2022-07-01

當年話下

TA貢獻1890條經驗獲得超9個贊

最好的方法是使用 CSS。它可以通過 CSS 輕松完成。但是對于某些特定情況，您可能需要它。這是您應該用來實現目標的代碼。

let button = document.createElement("button");

let text = document.createTextNode("Add Squares");

let num = 1;

let displayText = document.createTextNode("num");

button.appendChild(text);

document.body.appendChild(button);

document.body.style.cssText = 'display:flex; align-items:flex-start;';

button.addEventListener("click", function () {

let styles = {

'width': '77px',

'height': '77px',

'background-color': 'black',

'color': 'white',

'display': 'flex',

'align-items': 'center',

'justify-content': 'center',

}

let div = document.createElement("div")

div.id = num;

div.className = "squares";

for (let style in styles) {

div.style[style] = styles[style];

}

div.onmouseover = function() {

document.getElementById('text'+this.id).style.display = 'block';

}

div.onmouseout = function() {

document.getElementById('text'+this.id).style.display = 'none';

}

let text = document.createElement('span');

text.id = 'text'+num;

text.style.display = 'none';

text.appendChild(document.createTextNode(num));

div.appendChild(text);

document.body.appendChild(div);

num++;

});

反對回復 2022-07-01

3 回答
0 關注
142 瀏覽

關注

添加回答

舉報

0/150

提交

取消

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

熱搜

最近搜索清空

如何讓我的 ID 懸停在 id 所引用的 div 上

如何讓我的 ID 懸停在 id 所引用的 div 上

3 回答

添加回答