第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

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

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

精慕HU 2022-07-01 16:36:16
代碼創(chuàng)建了 div，它們是方形黑框。懸停在正方形上時(shí)，正方形的 id 值應(yīng)顯示在正方形的中心，當(dāng)光標(biāo)不再在正方形上時(shí)消失。- 任何想法如何做到這一點(diǎn)？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貢獻(xiàn)2019條經(jīng)驗(yàn) 獲得超9個(gè)贊

idCSS 可以通過(guò)在屬性中使用偽元素加載來(lái)為您處理這個(gè)問(wèn)題（并且可以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;

}


查看完整回答
反對(duì) 回復(fù) 2022-07-01
?
千巷貓影

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超7個(gè)贊

你可以：

  1. 創(chuàng)建黑色 div 的子 div

  2. 將 id 添加到子 div

  3. 使子 div 顯示：無(wú)

  4. 使用 CSS 規(guī)則在 :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 id="10" class="squares">

    <div class="overlay"><p>10</p></div>

  </div>

</body>


查看完整回答
反對(duì) 回復(fù) 2022-07-01
?
當(dāng)年話下

TA貢獻(xiàn)1890條經(jīng)驗(yàn) 獲得超9個(gè)贊

最好的方法是使用 CSS。它可以通過(guò) CSS 輕松完成。但是對(duì)于某些特定情況，您可能需要它。這是您應(yīng)該用來(lái)實(shí)現(xiàn)目標(biāo)的代碼。


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++;

});


查看完整回答
反對(duì) 回復(fù) 2022-07-01
  • 3 回答
  • 0 關(guān)注
  • 149 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)