Saya mencoba mencapai yang berikut - setiap kali saya mengarahkan kursor ke elemen gambar, saya ingin membuat elemen p di bawah gambar yang dilayangkan dan secara terprogram mengatur properti atas dan kirinya sehingga benar-benar selaras dengan gambar di atasnya. Saya sudah mencapai sebagian besar, namun, saya tidak tahu bagaimana melakukan perataan vertikal dengan gambar. Kode saya saat ini menghasilkan ini:

enter image description here

Ini karena saya telah mengatur properti left menjadi sama dengan this.eOffsetLeft = e.target.offsetLeft + width/2 yang merupakan offsetLeft dari gambar + width/2 yang membuat elemen p pengujian saya dimulai setelah bagian tengah gambar. Yang saya inginkan kurang lebih seperti ini:

enter image description here

Apakah ini dapat dicapai tanpa terlalu banyak kesulitan? Terima kasih sudah membaca!

Saya memiliki HTML berikut di template saya:

 <section class='skills'>
     <img @mouseover='displayAlt' @mouseleave='hover = false' src="#">
     <p v-if='hover' v-bind:style='{ "position": "absolute", "top": eOffsetTop + "px", "left": eOffsetLeft + "px" }'>Test</p>
 </section>

Dan JS berikut di tag skrip saya:

<script>
    export default {
        data(){
            return {
                hover: true,
                eOffsetTop: null,
                eOffsetLeft: null
            }
        },
        methods: {
            displayAlt(e){
                this.hover = true;
                console.log(e)
                this.eOffsetTop = e.target.offsetTop + e.target.height + 40
                let width = e.target.width
                this.eOffsetLeft = e.target.offsetLeft + width/2

            }
        }
    }
</script>
0
Bobimaru 31 Oktober 2019, 04:07

2 jawaban

Jawaban Terbaik

Tweak jawaban @ Steve tanpa JavaScript. Menggunakan CSS dan :hover sebagai gantinya.

section.skills {
  width: 300px;
  position: relative;
}

section.skills img {
  width: 100%;
}

section.skills p {
  display: none;
  position: absolute;
  text-align: center;
  bottom: 0;
  width: 100%;
}

section.skills:hover p {
  display: block;
}
<html>

<body>
  <section class='skills'>
    <img src="https://www.w3.org/html/logo/img/html5-topper.png">
    <p>Test</p>
  </section>
</body>

</html>
1
Soc 31 Oktober 2019, 06:39

Sayangnya, saya tidak terbiasa dengan vue.js.

Namun, menggunakan vanilla html, javascript, dan css Anda dapat melakukan ini (lihat cuplikan).

Di css, Anda perlu menyetel position elemen induk sebagai relative. Kemudian di p atur position: absolute;. Ini memungkinkan Anda untuk memposisikan elemen di dalam induk.

Kemudian dengan menggunakan peristiwa mouseover dan mouseout dalam tag img, Anda dapat menempatkan tag p di tempat yang Anda inginkan. Atur lebar p ke lebar gambar, dan bagian atas di mana pun Anda butuhkan. Karena text-align disetel ke center, teks akan rata sendiri ke tengah.

function showP(x) {
  let p = document.querySelector("section.skills > p");
  p.style.display = 'block';
  p.style.width = x.width + 'px';
  p.style.top = x.height - 42 + 'px';
}

function hideP(x) {
  let p = document.querySelector("section.skills > p");
  p.style.display = 'none';
}
section {
  position: relative;
}

section.skills p {
  display: none;
  position: absolute;
  text-align: center;
}
<html>

<body>
  <section class='skills'>
    <img onmouseover="showP(this)" onmouseout="hideP(this)" src="https://www.w3.org/html/logo/img/html5-topper.png" height="200">
    <p>Test</p>
  </section>
</body>

</html>
1
Steve 31 Oktober 2019, 02:10