cari

Rumah  >  Soal Jawab  >  teks badan

Jajarkan petua alat kepada induk relatif

Saya menghabiskan dua hari cuba memikirkan perkara ini tetapi saya sedar saya tidak boleh melakukannya sendirian. Saya cuba memusatkan petua alat saya berbanding dengan ibu bapa. Ini kod saya =>

let collection = document.querySelectorAll("[data-text]");
collection.forEach((ele, ind) => {
    var element = document.createElement("p");
    element.className = "tooltip-text";
    element.innerText = ele.dataset.text;
    element.dataset.name = "_" + ele.id + ind;
    document.getElementById(ele.id).appendChild(element);
         
    document.querySelector('#' + ele.id).addEventListener('mouseover', () => {
        document.querySelector('[data-name="' + element.dataset.name + '"]').style.visibility = 'visible';
     }, false);

   document.querySelector('#' + ele.id).addEventListener('mouseleave', () => {
        document.querySelector('[data-name="' + element.dataset.name + '"]').style.visibility = 'hidden';
   }, false);

});
.container {
  display: flex;
  background: #ccc;
  justify-content: center;
  align-items: center;
  height: 95vh;
}

.c-content{
  width: 100%;
  max-width: 800px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.toprightcontrols {
  margin: 0 1.2% 0 0;
  display: flex;
  position: absolute; 
  justify-content: flex-end;
  top: 0;
  right: 0;
  width: 150px;
  padding-top: 0;
  flex-wrap: nowrap;
}

.btnClass {
  padding: 10px;
  background: none;
  border: 0;
  outline: 0;
  cursor: pointer;
  align-self: center;
  justify-self: right;
}

.btnClass:before {
  content: url('https://img001.prntscr.com/file/img001/nLMdieVITRSq82yZdqlWOw.png');
}

p.tooltip-text {
  color: black;
  display: block;
  visibility: hidden;
  width: fit-content;
  position: absolute;
  border-radius: 2px;
  z-index: 1;
  background: white;
  pointer-events: none;
  padding: 6px 8px 20.2px 8px;
  font-size: 1rem;
  animation: fadein 0.2s ease-in;
  animation-fill-mode: forwards;
}

p.tooltip-text:before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -8px;
  border: 8px solid transparent;
  border-bottom: 8px solid white;
}
<div class="container">
            <div id="c-content">
                <div class="toprightcontrols">
                    <span name="btn1" id="btn1" class="btnClass" data-text="Hello there"></span>
                    <span name="xxxxx" id="xxxxx" class="btnClass" data-text="Tooltip"></span>
                    <span name="something" id="something" class="btnClass" data-text="Click me"></span>
                    <span name="randomid" id="randomid" class="btnClass" data-text="I'm a text"></span>
               </div>
        </div>
</div>

Hasil yang diharapkan mestilah seperti ini =>

Bolehkah anda membantu saya? Saya cuba menggunakan float、text-align、justify-content、margin: 0 auto dan semua yang saya lihat tertumpu tetapi tiada apa yang berkesan

Terima kasih.

P粉251903163P粉251903163255 hari yang lalu545

membalas semua(2)saya akan balas

  • P粉916760429

    P粉9167604292024-04-07 10:44:26

    Nampaknya saya telah menemui penyelesaiannya. Saya menambah: 

    .btnClass {
  display: flex;
  justify-content: center;
  align-items: center;
}

    Pusat semuanya kemudian: 

    p.tooltip-text {
  top:30px;
}

    Imbang menegak. 

    let collection = document.querySelectorAll("[data-text]");
  collection.forEach((ele, ind) => {
  var element = document.createElement("p");
  element.className = "tooltip-text";
  element.innerText = ele.dataset.text;
  element.dataset.name = "_" + ele.id + ind;
                  document.getElementById(ele.id).appendChild(element);
         
 document.querySelector('#' + ele.id).addEventListener('mouseover', () => {
                document.querySelector('[data-name="' + element.dataset.name + '"]').style.visibility = 'visible';
            }, false);

            document.querySelector('#' + ele.id).addEventListener('mouseleave', () => {
                document.querySelector('[data-name="' + element.dataset.name + '"]').style.visibility = 'hidden';
            }, false);

});
    .container {
  display: flex;
  background: #ccc;
  justify-content: center;
  align-items: center;
  height: 95vh;
}

.c-content{
  width: 100%;
  max-width: 800px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.toprightcontrols {
  margin: 0 1.2% 0 0;
  display: flex;
  position: absolute; 
  justify-content: flex-end;
  top: 0;
  right: 0;
  width: 150px;
  padding-top: 0;
  flex-wrap: nowrap;
}

.btnClass {
  padding: 10px;
  background: none;
  border: 0;
  outline: 0;
  cursor: pointer;
  align-self: center;
  justify-self: right;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btnClass:before {
  content: url('https://img001.prntscr.com/file/img001/nLMdieVITRSq82yZdqlWOw.png');
}

p.tooltip-text {
  color: black;
  display: block;
  visibility: hidden;
  width: fit-content;
  position: absolute;
  top:30px;
  border-radius: 2px;
  z-index: 1;
  background: white;
  pointer-events: none;
  padding: 6px 8px 20.2px 8px;
  font-size: 1rem;
  animation: fadein 0.2s ease-in;
  animation-fill-mode: forwards;
}

p.tooltip-text:before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -8px;
  border: 8px solid transparent;
  border-bottom: 8px solid white;
}

    balas
    0
  • P粉578343994

    P粉5783439942024-04-07 09:26:26

    Tetapkan elemen yang perlu menjadi rujukan pusat sebagai elemen relatif. Dalam kes anda, anda mahu konsisten dengan .btnClass . Dengan cara ini, kelas boleh membungkus kandungannya. 

    .btnClass {
  position: relative;
}

    Anda kemudian boleh memusatkan petua alat. Tentukan kedudukan kiri sebagai 50%，并使用 transform 和 translateX(-50%) supaya sifat transformasi bergerak -50% daripada elemen itu sendiri, yang sudah 50% ke kiri, jadi hasilnya adalah penjajaran yang sempurna. 

    .tooltip-text {
  left: 50%;
  transform: translateX(-50%);
}

    Keputusan akhir: 

    let collection = document.querySelectorAll("[data-text]");
collection.forEach((ele, ind) => {
var element = document.createElement("p");
element.className = "tooltip-text";
element.innerText = ele.dataset.text;
element.dataset.name = "_" + ele.id + ind;
document.getElementById(ele.id).appendChild(element);
         
    document.querySelector('#' + ele.id).addEventListener('mouseover', () => {
        document.querySelector('[data-name="' + element.dataset.name + '"]').style.visibility = 'visible';
     }, false);

   document.querySelector('#' + ele.id).addEventListener('mouseleave', () => {
        document.querySelector('[data-name="' + element.dataset.name + '"]').style.visibility = 'hidden';
   }, false);

});
    .btnClass {
  position: relative;
}

.tooltip-text {
  left: 50%;
  transform: translateX(-50%);
}

.container {
  display: flex;
  background: #ccc;
  justify-content: center;
  align-items: center;
  height: 95vh;
}

.c-content{
  width: 100%;
  max-width: 800px;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.toprightcontrols {
  margin: 0 1.2% 0 0;
  display: flex;
  position: absolute; 
  justify-content: flex-end;
  top: 0;
  right: 0;
  width: 150px;
  padding-top: 0;
  flex-wrap: nowrap;
}

.btnClass {
  padding: 10px;
  background: none;
  border: 0;
  outline: 0;
  cursor: pointer;
  align-self: center;
  justify-self: right;
}

.btnClass:before {
  content: url('https://img001.prntscr.com/file/img001/nLMdieVITRSq82yZdqlWOw.png');
}

p.tooltip-text {
  color: black;
  display: block;
  visibility: hidden;
  width: fit-content;
  position: absolute;
  border-radius: 2px;
  z-index: 1;
  background: white;
  pointer-events: none;
  padding: 6px 8px 20.2px 8px;
  font-size: 1rem;
  animation: fadein 0.2s ease-in;
  animation-fill-mode: forwards;
}

p.tooltip-text:before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -8px;
  border: 8px solid transparent;
  border-bottom: 8px solid white;
}

    balas
    0
  • Batalbalas