Ticker-Stop on Mouse Enter

A Ticker with Stop on Mouse Enter using html, css, query

HTML

<h3>Latest News</h3>
    <ul id="ticker">
        <li>Dummy data is benign information that does not contain any useful data, but serves to reserve spac...</li>
        <li>For testing, dummy data can also be used as stubs or pad to avoid software testing iss...</li>
        <li>In operational use, dummy data may be transmitted for OPSEC purposes.</li>
        <li>Dummy data must be rigorously evaluated and documented to ensure that it does no...</li>
        
    </ul>

CSS

.ticker {
    width: 400px;
	height: 100px;
	overflow: hidden;
	border: 1px solid #DDD;
	border-radius: 5px;
	box-shadow: 0px 0px 5px #DDD;
	background-color:  #F5F3E5;
	text-align: left;
}

.ticker h3 {
	padding: 0 0 10px 10px;
	border-bottom: 1px solid #A7A7A7;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-style: italic;
}

ul li {
    list-style: none;
    height:50px;
    padding:7px;
    border-bottom: 1px solid #D6CFB8;
}

ul li:hover {
    background-color: silver;
}

JavaScript

function ticker() {
    $('#ticker li:first-child').slideUp(function() {
        $(this).appendTo($('#ticker')).fadeIn();
    });
}

var timer = setInterval(ticker, 3000);

$('#ticker').on({
  mouseenter: function(){
    clearInterval(timer);
  },
  mouseleave: function(){
    timer = setInterval(ticker, 3000);
  }
});