Это мое первое сообщение здесь после многих посещений. Здравствуйте!Как сделать выпадающее меню слева?
Я пытаюсь сделать всплывающие аннотации на изображении. Для этого я использую раскрывающееся меню 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, поэтому я признателен за любую помощь
Ах, очень приятно. Я не знал, что вы можете сделать что-то вроде '.container: hover .copy'. Гораздо лучше, чем мое взломанное решение :) –
Я тоже не знал, что это возможно. Спасибо огромное! – sunnypop