Я отрисовываю абсолютно позиционированный p-элемент, используя JavaScript, и я не могу понять, как выровнять его с изображением над ним - PullRequest
Новая
       3

Я отрисовываю абсолютно позиционированный p-элемент, используя JavaScript, и я не могу понять, как выровнять его с изображением над ним

0 голосов
/ 31 октября 2019

Я пытаюсь добиться следующего - всякий раз, когда я наводю указатель мыши на элемент изображения, я хочу визуализировать элемент p под скрытым изображением и программно установить его свойство top и left так, чтобы оно полностью совпало с изображением над ним. Я уже достиг большей части, однако я не могу понять, как сделать вертикальное выравнивание с изображением. Мой текущий код приводит к следующему:

enter image description here

Это потому, что я установил свойство left равным this.eOffsetLeft = e.target.offsetLeft + width/2, что является offsetLeft изизображение + его ширина / 2, что заставляет мой тестовый элемент p начинаться после середины изображения. Что я хочу, так это более или менее:

enter image description here

Это достижимо без особых хлопот? Спасибо за чтение!

У меня есть следующий HTML в моем шаблоне: 

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

И следующий JS в моем теге скрипта: 

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

Ответы [ 2 ]

1 голос
/ 31 октября 2019

твик ответа @ Стива без JavaScript. Использование CSS и :hover вместо. 

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 голос
/ 31 октября 2019

К сожалению, я не знаком с vue.js.

Однако, используя vanilla html, javascript и css, вы можете сделать это (см. Фрагмент).

В css вам нужно установить position родительского элемента как relative. Затем в p установите position: absolute;. Это позволяет вам позиционировать элемент внутри родителя.

Затем, используя события mouseover и mouseout внутри тега img, вы можете расположить тег p там, где вам нужно. Установите ширину p, равную ширине изображения, и верху, где вам нужно. Поскольку для text-align установлено значение center, текст автоматически выровняется по центру. 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...