Question

我正在尝试使用css进行悬停打开div。我创建了它，但我有一个关于左右悬停位置的问题。

首先抱歉我的英语。

我从Codepen创建了 DEMO 。

我的问题是：如果您查看我的演示页，您会看到信息和位置图标。当您将鼠标悬停在信息或位置图标上时，您会看到bubble div。在好的部分的左上角。但是如果你将鼠标悬停在右侧的信息或位置上，那么你会看到气泡执行。

我不想搞泡泡。我想让一个泡泡停留在主要内部。我该怎么办？有人可以帮我吗？这是我的HTML代码：

 <div class="ssss">
      <div class="s_u_a">
        <div class="user_p_c_p">
          <img src="1.jpg">
        </div>
        <div class="user_p_p_p">
          <img src="2.jpg">
        </div>
        <div class="u_l_inf"> 
          <div class="u_l_"><div class="uynott">test</div></div>
          <div class="u_inf_"><div class="uynott2">test</div></div>
        </div>
        <div class="u_p_n_">test</div>
        <div class="u_p_n_s">test</div>
      </div>
    </div>

在这个html代码主div中是.sss

这是我的泡泡css代码：

.u_l_:hover .uynott {
 position:relative;
 opacity:1; 
   visibility:visible;


    transition: opacity .5s linear .5s;
    -webkit-transition: opacity .5s linear .5s;
    -moz-transition: opacity .5s linear .5s;
    -ms-transition: opacity .5s linear .5s;
}
.uynott 
{
font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:12px;
position: relative;
width: 295px;
height: auto;
padding: 10px;
background-color:#5890ff;
color:#fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: #5890ff solid 1px;
visibility:hidden;
line-height: 21px;
margin-left: -25px;
  opacity:0;
  margin-top:25px;
 -webkit-transition: all 0.7s ease-in-out;
   -moz-transition: all 0.7s ease-in-out;
   -o-transition: all 0.7s ease-in-out;
   -ms-transition: all 0.7s ease-in-out;
   transition: all 0.7s ease-in-out; 
  z-index:5;
}

.uynott:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 8px 8px;
border-color: #5890ff transparent;
display: block;
width: 0;
z-index: 1;
top: -8px;
left: 20px;
}

.uynott:before 
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 8px 8px;
border-color: #5890ff transparent;
display: block;
width: 0;
z-index: 0;
top: -9px;
left: 20px;
}

.u_inf_:hover .uynott2 {
 position:relative;
 opacity:1; 
   visibility:visible;


    transition: opacity .5s linear .5s;
    -webkit-transition: opacity .5s linear .5s;
    -moz-transition: opacity .5s linear .5s;
    -ms-transition: opacity .5s linear .5s;
}
.uynott2 
{
font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
font-size:12px;
position: relative;
width: 295px;
height: auto;
padding: 10px;
background-color:#5890ff;
color:#fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: #5890ff solid 1px;
visibility:hidden;
line-height: 21px;
margin-left: -115px;
  opacity:0;
  margin-top:25px;
 -webkit-transition: all 0.7s ease-in-out;
   -moz-transition: all 0.7s ease-in-out;
   -o-transition: all 0.7s ease-in-out;
   -ms-transition: all 0.7s ease-in-out;
   transition: all 0.7s ease-in-out; 
  z-index:5;
}

.uynott2:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 8px 8px;
border-color: #5890ff transparent;
display: block;
width: 0;
z-index: 1;
top: -8px;
left: 115px;
}

.uynott2:before 
{
content: '';
position: absolute;
border-style: solid;
border-width: 0 8px 8px;
border-color: #5890ff transparent;
display: block;
width: 0;
z-index: 0;
top: -9px;
left: 115px;
}

Answer 1

只需从课程width:295px中移除.uynott2并检查输出!!

Answer 2

TBH ......你只需要在右边为你的div做另一个课程，然后在悬停之前移动div。

此处您的代码正常运行：http://codepen.io/anon/pen/bDrwk

code

只要查看我所做的更改，您就会很容易看到您必须要做的事情。不会复制所有代码，因为它会和你一样长（甚至更长）而且有点混乱我也会移动你泡泡的小箭头。

css悬停div位置自动左右

2 个答案: