鼠标悬停时的文本框

Question

我到处都在尝试找到鼠标悬停时位于图像左侧或右侧的基本文本框。在所有其他图像上方的矩形框中，没有什么只是背景色。

我已经尝试了HTML中的“ Title”标签，但是它太慢了。因此需要更灵敏的响应和可编辑的内容。需要悬停出现然后消失。将鼠标悬停在图像上时也会出现鼠标光标会很好。

Answer 1

HTML有一个"onmouseenter" event.

12, 14
22, 24
29, 31
77, 79

您可以使用它来激活javascript，然后显示具有相对位置的<div onhover="box()"></div> 或div，但是您必须在其中弯曲一些CSS肌肉。

Answer 2

您可以使用将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>

Answer 3

这是一个使用mouseover来显示文本输入的解决方案，一旦用户更改了输入的值，该输入将再次隐藏。我使用的一些CSS有点使示例更漂亮，但是对于功能而言很重要的是：

#container具有position: relative;（这使孩子可以绝对放置在里面）
#myImg具有float: left;（并且它的width属性已定义并且不太宽）
#textContainer具有position: absolute; display: none;（并且其left属性等于#myImg的宽度）
＃more-content-to-right有float: left（并且它的width属性已经定义并且不太宽）
＃more-content-below具有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>