Текстовое поле при наведении мыши - PullRequest
Новая
       14

Текстовое поле при наведении мыши

0 голосов
/ 03 февраля 2019

Textbox on mouse hover

Я искал повсюду, пытаясь найти базовое текстовое поле при наведении курсора мыши, которое находится слева или справа от изображения.Ничего особенного, только цвет фона в прямоугольнике, который расположен над всеми другими изображениями.

Я пробовал тег 'Title' в HTML, но он слишком медленный.Так что нужно что-то более отзывчивое и редактируемое.Должен появиться при наведении, а затем исчезнуть.Было бы неплохо иметь курсор мыши, который появляется также при наведении на изображение.

Ответы [ 3 ]

0 голосов
/ 03 февраля 2019

Вы можете использовать псевдоэлемент, который использует атрибут title в качестве содержимого. 

.image {
    position: relative;
}
    
.image:hover:after {
    position: absolute;
    content: attr(title);
    display: inline-block;
    left: 0px;
    top: 0px;
    padding: 5px;
    background-color: black;
    color: white;
}
<div class="image" title="I Show up on Hover">
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"> 
</div>
0 голосов
/ 03 февраля 2019

Вот решение, использующее mouseover для отображения ввода текста, который снова скрывается, когда пользователь изменяет значение ввода.Некоторые из CSS, которые я использовал, немного хакерские, чтобы сделать пример красивее, но для функциональности важны следующие биты:

# контейнер имеет position: relative; (это позволяет детям быть абсолютно позиционированными внутри)
#myImgимеет float: left; (и его свойство width определено и не слишком широко)
#textContainer имеет position: absolute; display: none; (а его свойство left равно ширине #myImg)
# more-content-to-right имеет float: left (и его свойство width определено и не слишком широко)
# more-content-under имеет clear: both

В процессе производства я бы избавился от границ и использовал большенадежные методы «преттификации». 

function showTextContainer(){
  document.getElementById("textContainer").style.display = "block";
}
function hideTextContainer(){
  document.getElementById("textContainer").style.display = "none";
}
#container { position: relative; width: 530px; margin: 0 0; padding: 2px; }
#myImg { height: 100px; width: 200px; float: left; }
#textContainer { position: absolute; left: 200px; top: 50px; height: 1.3em; width: 200px; display: none; }
#textbox {width: 98%; }
#more-content-to-right { float: left; height: 100px; width: 300px; }
#more-content-below { clear: both; height: 100px; width: 508px; }
.bordered { border: 1px solid gray; margin: 3px;}
<div id="container" class="bordered">container<br/>
  <div id="myImg" class="bordered" onmouseover="showTextContainer()">img</div>
  <div id="textContainer" class="bordered">
    <input id="textbox" placeholder="type stuff here" onchange="hideTextContainer()" />
  </div>
  <div id="more-content-to-right" class="bordered">more content to right</div>
  <div id="more-content-below" class="bordered">more content below</div>
</div>
0 голосов
/ 03 февраля 2019

HTML имеет событие «onmouseenter». 

<div onhover="box()"></div>

Вы можете использовать это для активации JavaScript, который затем отображает div или span с относительной позицией, но вам придется напрячь несколько CSS-мышц там.

...