Question

我正在尝试动态定位div，当我将鼠标移到div“A”时，另一个div“B”将可见，它应位于div A之下。基本上我正在尝试实现工具 - 小费的东西。试着用jQuery定位，我该怎么做呢

div B

的css

.B ul li
{
font-size: 11px;
font-family: Arial;
float: left;
}

.B{

min-height:10px;  
background: #333333;
color:white;
padding:5px;
position:absolute;
word-wrap:break-word;
-moz-border-radius:5px; 
-webkit-border-radius:5px;
z-index:999;
display: none;


}

.B:after{ /*arrow added to uparrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:-16px; 
left:30px;
width:0;
height:0;
border-color: transparent transparent #333333 transparent; 
border-style: solid;
 border-width: 10px;

 } 

css for `div A`

.A
{
float:left;
    cursor:pointer;
font-family:Arial;
    font-size: 11px;
color: rgb(119, 119, 119);
}

jQuery的：

$('.A' ).live('mouseover',function (event){
event.preventDefault();
var B=$(this).next();
$(B).show();
$(B).css( { "margin-top" : "27px", "margin-left" : "200px" } );

});

Answer 1

如果我们使用PURE CSS做任何伤害？正如你用CSS标记的那样，我认为CSS解决方案已被接受..

Demo

Demo 2 （没什么特别的，只是突出了工具提示）

Demo 3将transition与opacity

一起使用

此处，主要部分使用content属性，:hover a，显示data-tooltip属性的内容，自HTML5开始为valid custom attribute

<p>This is a <span data-tooltip="showthis">tooltip</span></p>

span:after {
    display: none;
    content: attr(data-tooltip);
    position: absolute;
    bottom: -50px;
    background: #f00;
    padding: 10px;
}

span {
    position: relative;
}

span:hover:after {
    display: block;
}

Answer 2

对象选择器有一点错误，不使用$（B）但使用B：

$('.A' ).live('mouseover',function (event){
event.preventDefault();
var B=$(this).next();
B.show();
B.css( { "margin-top" : "27px", "margin-left" : "200px" } );

});

您已经分配了B = $（this）.next（）;这是对象本身所以只需使用B而不是$（B）。

我还建议您使用on代替实时功能。

CSS将鼠标定位在鼠标上方

2 个答案: