a {
position:relative;
}
a span
{
display:none;
}
a:hover span
{
position:absolute;
display:inline;
border: 1px solid #0000FF;
margin: 0px 0px 0px 10px;
padding: 5px;
color: #000000;
background: #faffc3;
opacity:.90;
right:0;
margin-right: 105%;
}
CSS: How to move hint box (a:hover) to the left?
문제
I have hints in boxes, which are made like this:
CSS code:
a span
{
display:none;
}
a:hover span
{
position:fixed;
display:inline;
border: 1px solid #0000FF;
margin: 0px 0px 0px 10px;
padding: 5px;
color: #000000;
background: #faffc3;
opacity:.90;
}
HTML code, hint are between span tags, and inside a element:
<div>
Some text,
<a href="#">link<span>Hint.<br>Second line of hint.</span></a>
, some text, and another
<a href="#">link<span>Hint</span></a>.
</div>
Is it possible to move hint's box from the right side of the link (default position), to the left side by using some CSS properties?
해결책
다른 팁
you need to set margin-left according to your requirement.
a:hover span
{
margin-left:-10px;
}
see example
I think this code will work for you:
a{
position: relative;
}
a:hover span{
position: absolute;
right: 100%;
}
The span will have its right border touching the left border of the <a>
. This will work better if you define a width for the span.
제휴하지 않습니다 StackOverflow