文本框鼠标悬停

Question

我到处找试图找到鼠标悬停，坐在无论是在图像的左边或右边一个基本的文本。没有什么幻想，只是背景色，上述的所有其它图像位于矩形框。

我试着在HTML中的“标题”标签，但实在是太慢了。因此，需要的东西更加敏感和编辑。需要出现在盘旋，然后消失。会是不错的鼠标悬停在图片时出现过鼠标光标。

Answer 1

HTML有一个"onmouseenter" event.

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

你可以用它来启用JavaScript，然后显示一个div或用相对位置来一个span，但你必须要弯曲的几个CSS肌肉那里。

Answer 2

下面是使用mouseover显示一个文本输入，这是再次隐藏一旦用户改变输入的价值的解决方案。一些我用CSS的有点哈克使例子更漂亮，但对于功能性重要位是：

＃container的position: relative;（这可以让孩子们被绝对定位里面） #myImg具有float: left;（和它的宽度属性被定义，而不是太宽） #textContainer具有position: absolute; display: none;（及其left属性等于#myImg的宽度） ＃更多内容向右已经float: left（和它的宽度属性被定义，而不是太宽） -下面更含量＃有clear: both

在生产中，我摆脱了边框的，并使用更强大的技术“prettification”。

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>

Answer 3

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