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

Question

我的文字不适合div 标记.textBox。所以我想做一个函数，在悬停父 div 的情况下，文本开始从左到右滚动。所以用户可以阅读完整的内容。当它不悬停时，它会淡出到默认位置。

我不想使用选取框。我想保持结构不变并使用 CSS 或 JavaScript 来解决它。

这里是一个没有函数的例子：

.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>

知道怎么做吗？

Answer 1

看到这个纯 CSS 解决方案，添加了一个 span 标签使其成为可能。

关键概念是：将span标签向左移动，其值为box的宽度-span的宽度。换句话说，它可以在悬停时滚动到文本的末尾。

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

使用 jquery scrollLeft 方法

var interval_val = 2;

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

查看此链接：https://plnkr.co/edit/NtYpo6l77yet9SE0wpms?p=preview

有关 onmouseover 和 onmouseout 事件的演示示例，请访问：https://myswaasth.com/#/swaasth/procedures

Answer 3

TheGuy's answer 的替代版本，它结合了 javascript（避免使用 Jquery）来处理动态 css 宽度。

返回的过渡可能更复杂，但我认为这只会使示例复杂化。

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

通过 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

编辑：我已取出 CSS，因为它没有响应。当您的鼠标悬停在 div 上时，下面的 javascript 代码会滚动它。

请注意：我在 html 的 div 中添加了一个id="myDiv"。

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

我也在这个fiddle中演示过。