Html css悬停div位置自动向左和向右

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

首先为我的英语感到抱歉

我从Codepen创建了这个

我的问题是：如果你查看我的演示页面，你会看到信息和位置图标。当您将鼠标悬停在信息或位置图标上时，您会在尼斯零件的左上角看到气泡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>

---

只需从类

.uynott2

中删除宽度：295px，然后检查输出

TBH。。。您只需在右侧为div创建另一个类，并在悬停之前将div隐藏起来

下面是您的代码：

---

只要看看我所做的改变，你就会很容易明白你必须做什么。不会复制所有代码，因为它与您的代码一样长（甚至更长），并且有点混乱。我还移动了您气泡的小箭头。

谢谢您的回答，但是如果您查看演示，您可以将鼠标悬停在右侧信息图标上，因为箭头显示左侧用户信息。更新的代码。。。但是伙计。。。你可以看到我是如何修复一个箭头的，而你是如何修复另一个箭头的。我觉得我只是在为你工作，而不是帮助一个怀疑者。非常感谢你的帮助。我理解这个问题。你是个好教练。

.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;
}

code