Question

我的文字不适合div代码.textBox。所以我想创建一个函数，在悬停父div的情况下，文本开始从左向右滚动。因此用户可以阅读完整内容。当它没有悬停时，它会退回到默认位置。

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

以下是没有该功能的示例：

＆＃13;

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

＆＃13;

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

＆＃13;

知道怎么做吗？

Answer 1

请参阅此纯CSS解决方案，添加了一个span标记以使其成为可能。

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

<强> jsfiddle

＆＃13;

.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%));
}

＆＃13;

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

＆＃13;

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

通过JQUERY看到这个

＆＃13;

function showResult(req, res){

    var n = req.query.query;
    mysql_conn.query('SELECT query_text FROM catalogsearch_query WHERE query_text LIKE "%' + n + '%" ORDER BY popularity DESC LIMIT 0 , 10', function (error, rows) {
        mysql_crawl.query('SELECT prod_name, full_price, discount_price, quantity, fulltext_id,prod_link, images, prod_desc, status, web_name,web_logo FROM `catalogsearch_fulltext` WHERE MATCH(data_index) AGAINST("'+n+'") ', function(error, product_data) {

            var totalItems = product_data.length, itemts=product_data;

    //set default variables
    var totalResult = totalItems,
        pageSize = 10,
        pageCount = Math.floor(totalResult / pageSize)
        currentPage = 1


    //set current page if specifed as get variable (eg: /?page=2)
    if (typeof req.query.page !== 'undefined') {
        currentPage = +req.query.page;
    }

    //render index.ejs view file
            res.render('result.html', {result: n, 
            related: rows.map(row => row.query_text), 
            page_num: p,
            product_data: product_data,
            totalItems: totalItems,
            pageSize: pageSize,
            pageCount: pageCount,
            currentPage: currentPage})
        });
    });
}

＆＃13;

 $(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' );
            } );
        } );

＆＃13;

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

＆＃13;

Answer 4

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 5

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

请注意：我在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中展示了它。

如何在鼠标悬停时将div内的文本滚动到左侧

5 个答案: