css hover div位置自动向左和向右

我想让一个悬停与CSS打开div。我创建了它，但我有一个关于左右悬停位置的问题。css hover div位置自动向左和向右

首先抱歉我的英语。

我从Codepen创建了这个DEMO。

我的问题是：如果你检查我的演示页面，你会看到信息和位置图标。当您将鼠标悬停在信息或位置图标上时，您会看到泡泡格。在好的部分的左上角。但是如果您将鼠标悬停在右侧的信息或位置上，则可以看到泡泡已经完成。

我不想进行泡沫。我想让泡沫留在主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>

在这个网站码主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; 
}

来源

2014-09-30 innovation

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

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

code

只是看看我所做的更改，你会很容易地看到你不得不做的事情。不会复制所有的代码，因为它会和你的代码一样长（甚至更长），有点令人困惑，我也会移动你泡沫的小箭头。

来源

2014-09-30 10:41:37

感谢您的回答，但如果您检查演示，可以将鼠标悬停在右侧信息图标上，因为箭头显示左侧用户信息。 – innovation 2014-09-30 10:48:02

更新的代码...但队友...你可以看到我如何修复一个箭头，以便修复你自己。我觉得我只是在为你工作，因为你有疑问帮助 – 2014-09-30 10:50:31

非常感谢你的帮助。我理解这个问题。你是一个好教练。 – innovation 2014-09-30 10:52:41

只是删除从类.uynott2和检查输出！

来源

2014-09-30 10:35:10 Aru

css hover div位置自动向左和向右

回答

相关问题