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位置自動向左和向右

回答

相關問題