I was wondering if there is a way to show the span to the left (or right) of the “more” link using css only (no javascript) … in other words, to have the span position related to <a href..> Here’s what I’m talking about:
<html><head>
<title>Show More</title>
<style>
body {text-align:center;}
#wrapper {width:75%;margin:0 auto;text-align:left;}
a.smore {text-decoration:none;font-size:.80em;}
a.smore span{display:none;}
a.smore:hover{background:#556B2F;color:#fff;}
a.smore:hover span {
position:absolute;
right:20em;
width:50%;
max-width:50%;
// margin:0 auto;
display:block;
z-index:100;
padding:7px 9px;
background-color:#f0f0f0;
border:1px solid #cecece;
color:#00008b;
-moz-border-radius:6px;opacity:0.95;cursor
ointer;
}
</style>
</head>
<body>
<div id="wrapper">
<hr>
<div>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis..
<a href="#" class="smore" onclick="return false;">more...<span>...aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et
harumd und lookum dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda.</span></a>
test, test, test.
</div>
bla bla bla bla
<hr>
</div><!-- wrapper ends here //-->
<div style="text-align:left;">Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis...
<a href="#" class="smore" onclick="return false;">more »<span>...aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque
civiuda.</span></a>
test, test, test.
</div>
</body></html>
Thanks a bunch!
<html><head>
<title>Show More</title>
<style>
body {text-align:center;}
#wrapper {width:75%;margin:0 auto;text-align:left;}
a.smore {text-decoration:none;font-size:.80em;}
a.smore span{display:none;}
a.smore:hover{background:#556B2F;color:#fff;}
a.smore:hover span {
position:absolute;
right:20em;
width:50%;
max-width:50%;
// margin:0 auto;
display:block;
z-index:100;
padding:7px 9px;
background-color:#f0f0f0;
border:1px solid #cecece;
color:#00008b;
-moz-border-radius:6px;opacity:0.95;cursor
ointer; }
</style>
</head>
<body>
<div id="wrapper">
<hr>
<div>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis..
<a href="#" class="smore" onclick="return false;">more...<span>...aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et
harumd und lookum dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque civiuda.</span></a>
test, test, test.
</div>
bla bla bla bla
<hr>
</div><!-- wrapper ends here //-->
<div style="text-align:left;">Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis...
<a href="#" class="smore" onclick="return false;">more »<span>...aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Et harumd und lookum dereud facilis est er expedit distinct. Nam liber te conscient to factor tum poen legum odioque
civiuda.</span></a>
test, test, test.
</div>
</body></html>
Thanks a bunch!