2012-01-16 3 views
0

Это мое первое сообщение здесь после многих посещений. Здравствуйте!Как сделать выпадающее меню слева?

Я пытаюсь сделать всплывающие аннотации на изображении. Для этого я использую раскрывающееся меню CSS. Вы можете увидеть мой пример here

Когда вы наводите курсор на значок кончика слева, контейнер расширяется, чтобы открыть текст. Но для значка подсказки справа текстовое поле выходит за пределы границы изображения.

Как сделать текстовое поле слева от значка, чтобы оно оставалось в пределах изображения? Я использовал margin-left с отрицательным значением, но также перемещает значок наконечника.

Вот мой код: тест

</head> 
<body> 

<style type="text/css"> 

.container { 
z-index: 1000; 
width: 15px; 
height: 18px; 
overflow: hidden; 
position: absolute; 
} 
.container:hover { 
width: 200px; 
height: auto; 
} 

.copy { 
font-size: 12px; 
font-family: Helvetica, Verdana, Arial, sans-serif; 
padding: 5px; 
background-color: #ffcc99; 
} 

#painting { 
margin: 0; 
padding: 0; 
width: 750px; 
height: 530px; 
background: url(painting.jpg) top left no-repeat #ffffff; 
} 

#tip1 { 
left: 185px; 
top: 60px; 
} 

#tip2 { 
left: 698px; 
top: 290px; 
} 

</style> 


<div id="tip1" class="container"> 
    <div class="icon"> 
     <img src="tip_icon.png"> 
    </div> 

    <div class="copy"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras libero ante, faucibus ac dictum eget, mollis ac erat. In porta velit vitae arcu vehicula ornare lacinia turpis accumsan. Quisque nec ligula non ligula elementum ultrices. Suspendisse commodo suscipit dapibus.</p> 
    </div> 
</div> 

<div id="tip2" class="container"> 
    <div class="icon"> 
     <img src="tip_icon.png"> 
    </div> 

    <div class="copy"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras libero ante, faucibus ac dictum eget, mollis ac erat. In porta velit vitae arcu vehicula ornare lacinia turpis accumsan. Quisque nec ligula non ligula elementum ultrices. Suspendisse commodo suscipit dapibus.</p> 
    </div> 
</div> 

<div id="painting"> 
    </div> 

</body> 

Я все еще учусь CSS, поэтому я признателен за любую помощь

ответ

1

Это мое решение этой проблемы: http://jsfiddle.net/CwgDQ/1/ Вместо перелива содержимого контейнера скрыть его по умолчанию и показать на :hover. Добавить position:absolute в .copy и #tip2 .copy { ...; right:0 } должен сделать трюк.

EDIT (копия CSS)

.container { 
    z-index: 1000; 
    position: absolute; 
} 

.container:hover { 
    height: auto; 
} 

.container .copy { 
    display:none; 
} 

.container:hover .copy { 
    display:block; 
    width: 200px; 
} 

.copy { 
    font-size: 12px; 
    font-family: Helvetica, Verdana, Arial, sans-serif; 
    padding: 5px; 
    background-color: #ffcc99; 
    position:absolute; 
} 

#painting { 
    margin: 0; 
    padding: 0; 
    width: 750px; 
    height: 530px; 
    background: url(http://www.troyoxford.com/paint/painting.jpg) top left no-repeat #ffffff; 
} 

#tip1 { 
    left: 185px; 
    top: 60px; 
} 

#tip2 { 
    left: 698px; 
    top: 290px; 
} 

#tip2 .copy { 
    right:0 
} 
+0

Ах, очень приятно. Я не знал, что вы можете сделать что-то вроде '.container: hover .copy'. Гораздо лучше, чем мое взломанное решение :) –

+0

Я тоже не знал, что это возможно. Спасибо огромное! – sunnypop

0

Попробуйте это ...

.container { 
    z-index: 1000; 
    width: 15px; 
    height: 18px; 
    position: absolute; 
    overflow: hidden; 
} 

.container:hover { 
    width: 200px; 
    height: auto; 
    overflow: visible; 
} 

.copy { 
    font-size: 12px; 
    font-family: Helvetica, Verdana, Arial, sans-serif; 
    padding: 5px; 
    background-color: #ffcc99; 
} 

#painting { 
    margin: 0; 
    padding: 0; 
    width: 750px; 
    height: 530px; 
    background: url(painting.jpg) top left no-repeat #ffffff; 
} 

#tip1 { 
    left: 185px; 
    top: 60px; 
} 

#tip2 { 
    left: 698px; 
    top: 290px; 
} 

#tip2 .copy { 
    position: relative; 
    left: -185px; 
} 

Обратите внимание, что это немного взломанно, так что разделы copy скрываются в данный момент, так как вы просто делаете их крошечными и скрываете переполнение.

Там может быть умный способ CSS, чтобы достичь его «правильно», но я был бы склонен использовать немного JavaScript, так что при наведении курсора мыши на один из элементов, она показывает другой ...

В ответе на ваш главный вопрос, комбинированное использование position: relative и использование отрицательного left смещения сделало трюк. Для получения дополнительной информации о взаимном расположении, смотрите здесь:

http://www.w3schools.com/cssref/pr_class_position.asp

+0

Благодарим за помощь. Приятно видеть, что существует более одного решения. – sunnypop

0

Вы должны рассмотреть возможность использования JQuery плагин для управления всплывающих подсказок, потому что с помощью CSS в одиночку вы не можете объяснить различные разрешения экрана, так заставляя всплывающее окно к влево или вправо может потенциально вытеснить его с экрана. Это отличный плагин, который может определять положение мыши и экран, чтобы показать всплывающее окно в ясном виде.

http://craigsworks.com/projects/qtip2/demos/

+0

Спасибо за совет. Я никогда не использовал jquery или javascript, но я хотел бы узнать. – sunnypop

Смежные вопросы