CSS 호버 div 위치 자동 왼쪽 및 오른쪽

Question

나는 CSS로 호버 오픈 div를 만들려고 노력하고있다. 나는 그것을 만들었지 만 왼쪽과 오른쪽으로 공중 선회 위치에 관한 하나의 질문이 있습니다.

우선 영어로 유감입니다.

만든이 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> 

이 html 코드의 주요 사업부가 .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 

그냥 내가 만든 변화를 보라 그리고 당신은 쉽게 당신이해야 할 일을했을 것을 볼 수 있습니다. 당신이 (더 이상) 길고 약간 혼란 스럽기 때문에 거품의 작은 화살을 움직이기 때문에 모든 코드를 복사하지 않을 것입니다.

Answer 2

그냥 제거 width:295px.uynott2 및 출력을 확인하십시오 !!