html - css hover div position auto left and right

Question

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

首先对不起我的英语。

我创建了这个 DEMO 来自 Codepen。

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

不想进行冒泡。我想让一个气泡留在主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

TBH...您只需要在右侧为您的 div 创建另一个类，并在悬停之前移动隐藏的 div。

这里你有你的代码工作:http://codepen.io/anon/pen/bDrwk

code

只要看看我所做的更改，您就会很容易地看到您必须做什么。不会复制所有代码，因为它和你的一样长(甚至更长)并且有点困惑我也移动了你的气泡的小箭头。