悬停div时如何将div中的文本向左滚动

Question

I have a text that does not fit in a div tag, .textBox . So I want to make a function that in case of hovering the parent div, the text starts scrolling from left to right. So the user can read the full content. And when it is not hovering it fades back to the default position.

I do not want to use marquee. I want do keep the structure as it is and use CSS, or JavaScript to solve it.

Here is an example without the function:

 .textBox { width: 200px; height: 30px; border: 1px solid #000; overflow: hidden; line-height: 30px; padding: 5px; }

 <div class="textBox">Some Content here and some more here</div>

Any idea how to do this?

Answer 1

See this pure CSS solution, added a span tag to make it possible.

The key concept is: move the span tag to the left with the value of box's width - span's width. In the other word that makes it to scroll to the end of the text on hover.

jsfiddle

 .textBox { width: 200px; height: 30px; border: 1px solid #000; overflow: hidden; line-height: 30px; padding: 5px; position: relative; }.textBox span { position: absolute; white-space: nowrap; transform: translateX(0); transition: 1s; }.textBox:hover span { transform: translateX(calc(200px - 100%)); }

 <div class="textBox"><span>The quick brown fox jumps over the lazy dog</span></div>

Answer 2

use jquery scrollLeft method

var interval_val = 2;

setInterval(function(){
    $(".scroll_contant").scrollLeft(interval_val);
    interval_val++;
}, 100);

see this link: https://plnkr.co/edit/NtYpo6l77yet9SE0wpms?p=preview

and for demo example with onmouseover and onmouseout event visit: https://myswaasth.com/#/swaasth/procedures

Answer 3

An alternative version of TheGuy's answer that incorporates javascript (avoids Jquery) to handle dynamic css width.

The transition for going back could be more sophisticated, but I figured it would only complicate the example.

jsfiddle

 const tansitionTimePerPixel = 0.01; const textBoxes = document.querySelectorAll( ".textBox" ); textBoxes.forEach((textBox) => { textBox.addEventListener('mouseenter', () => { let textWidth = textBox.lastChild.clientWidth; let boxWidth = parseFloat(getComputedStyle(textBox).width); let translateVal = Math.min(boxWidth - textWidth, 0); let translateTime = - tansitionTimePerPixel * translateVal + "s"; textBox.lastChild.style.transitionDuration = translateTime; textBox.lastChild.style.transform = "translateX("+translateVal+"px)"; }) textBox.addEventListener('mouseleave', () => { textBox.lastChild.style.transitionDuration = "0.3s"; textBox.lastChild.style.transform = "translateX(0)"; }) });

 .textBox { width: 20%; height: 30px; border: 1px solid black; overflow: hidden; line-height: 30px; padding: 5px; }.textBox > span { display: inline-block; white-space: nowrap; transition-timing-function: linear; }

 <div class="textBox"><span>The quick brown fox jumps over the lazy dog</span></div>

Answer 4

SEE THIS BY JQUERY

 $(document).ready( function () { // for stuff that scrolls left on hover $( ".scroll_on_hover" ).mouseover( function () { $( this ).removeClass( "ellipsis" ); var maxscroll =$( ".boardindex_themefitted_board_main_description" ).width(); var speed = maxscroll * 15; $( this ).animate( { scrollLeft: speed }, 10000, "linear" );//set timer for slower one } ); $( ".scroll_on_hover" ).mouseout( function () { $( this ).stop(); $( this ).addClass( "ellipsis" ); $( this ).animate( { scrollLeft: 0 }, 'fast' ); } ); } );

 .boardindex_themefitted_board_main_description.scroll_on_hover:hover { cursor: none;}.ellipsis {text-overflow: ellipsis;}.hide {display: none;} /* Set a fontsize that will look the same in all browsers. */ body {background: #fff;background-repeat: repeat; font: 78%/130% "Arial", "Helvetica", sans-serif; margin: 0 auto; } /* use dark grey for the text, leaving #000 for headers etc */ body, td, th, tr {color: #444;} /* BoardIndex.template.php Theme Fitted format ------ */.boardindex_themefitted_category_holder_aligner { text-align: center; margin: 0 auto; }.boardindex_themefitted_board_main { background: #fff; border: 1px solid #373737; border-radius: 8px; height: 44px; margin: 0 auto; width: 20%; }.boardindex_themefitted_board_main_content { padding: 10px; overflow: hidden; }.boardindex_themefitted_board_main_description { white-space: nowrap; overflow: hidden; font-weight: bold; font-size: 10px; font-family: Arial; color: #373737; line-height: 12px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="boardindex_themefitted_board_holder"> <div class="boardindex_themefitted_board_main"> <div class="boardindex_themefitted_board_main_content"> <div id="boardindex_themefitted_board_main_content_chunk1" class="show"> <div class="boardindex_themefitted_board_main_subject floatleft ellipsis"> <a href="http://default-smf.visualpulse.net/index.php?board=1.0" name="b1">General Discussion</a> </div> <div class="clear"></div> <div class="boardindex_themefitted_board_main_description scroll_on_hover ellipsis" id="input" > Feel free to talk about anything and everything in this board.Feel free to talk about anything and everything in this board.Feel free to talk about anything and everything in this board. </div> <div class="clear"></div> </div> </div> </div> <div class="clear"></div> </div>

Answer 5

EDIT: I have taken out the CSS because it was unresponsive. The following javascript code makes the div scroll when your mouse is over it.

Please note: I have added an id="myDiv" to the div in the html.

var myDiv = document.getElementById("myDiv");
myDiv.addEventListener("mouseover", function(){
    myDiv.style = "overflow-y:scroll"
});
myDiv.addEventListener("mouseout", function(){
    myDiv.style = "overflow-y:hidden"
});

I have also demonstrated it in this fiddle .