使三个div自动播放并显示其隐藏的文本

时间：2018-08-01 07:07:01

标签： jquery html css autoplay

我有三个div，下面是display: none文字。当用户将鼠标悬停在div之一上时，它将显示隐藏的文本。

现在，我不想添加其他功能，如果没有用户悬停在这些div上，该div只会自动显示其隐藏的文本，就像自动播放轮播一样。

我可以采用哪种方法来做到这一点？ jQuery的？还是可以仅使用CSS做到这一点？

PS：我不知道可以找到什么来找到这种功能。

.col-md-2 {
    float: left;
}

.product-icon-box {
    width: 128px;
}

.product-icon-box-desc-certified, .product-icon-box-desc-warranty, .product-icon-box-desc-buyback, .product-icon-box-desc-shipping {
    display: none;
    width: 512px;
}

.product-icon-box:hover {
    background: #E6DCD0;
}

.product-icon-box:hover .product-icon-box-desc-certified {
    display: block;
    position: relative;
    top: 0px;
    left: 0;
    background: #fff;
}

.product-icon-box:hover .product-icon-box-desc-warranty {
    display: block;
    position: relative;
    top: 0px;
    left: -128px;
    background: #fff;
}

.product-icon-box:hover .product-icon-box-desc-buyback {
    display: block;
    position: relative;
    top: 0px;
    left: -256px;
    background: #fff;
}
<div class="row mb30">
				<div class="col-md-2 text-center product-icon-box">
					<a href="http://google.com" target="_blank">
						<img class="center-block" src="http://iceiceicy.com/wingwah/wp-content/uploads/2015/11/icon-ori.png" /> 
							<i>Authenticity & Restoration</i>
					</a>
					<div class="product-icon-box-desc-certified">
					<p class="certified-title">CERTIFIED AUTHENTIC</p>
					<p class="certified-desc">Aliquam libero lorem, rutrum vitae dolor quis, pellentesque placerat lectus. Suspendisse potenti. Sed ullamcorper dictum libero eget aliquet. In mauris est, blandit ut aliquam at, tristique ac orci. Quisque mollis, lectus in tempor bibendum, libero dui aliquet odio, vitae dictum arcu elit sit amet eros. Maecenas pellentesque nunc enim, id porta orci pretium vitae. Nam pellentesque sem vitae neque iaculis, vel tincidunt ligula mollis. In fringilla dictum tortor eu accumsan. Donec ac neque et ligula egestas venenatis. Donec malesuada ultricies posuere. Nullam risus nunc, finibus sit amet nisi ac, molestie tempor dui.</p>
					</div>
				</div>
				<div class="col-md-2 text-center product-icon-box">
					<a href="http://google.com" target="_blank">
						<img class="center-block" src="http://iceiceicy.com/wingwah/wp-content/uploads/2015/11/icon-waranty.png" /> 
							<i>12 Months Warranty</i>
					</a>
					<div class="product-icon-box-desc-warranty">
					<p class="certified-title">CERTIFIED PRE-OWNED WATCHES WARRANTY</p>
					<p class="certified-desc">Donec ac nibh urna. Mauris porta quis lacus id efficitur. Mauris sit amet congue nunc. Nullam tellus lacus, vehicula non viverra id, fringilla eu sapien. Nulla facilisi. Pellentesque rutrum nulla in ex facilisis blandit non eu risus. Nam imperdiet sed risus fermentum tristique. Integer elementum vitae diam non volutpat. Praesent in mi blandit nunc efficitur elementum. Etiam dapibus dui dui, vitae pretium urna dapibus at.</p>
					</div>
				</div>
				<div class="col-md-2 text-center product-icon-box">
					<a href="http://google.com" target="_blank">
						<img class="center-block" src="http://iceiceicy.com/wingwah/wp-content/uploads/2015/11/icon-buyback.png" /> 
							<i>Buy Back / Trade In Guarantee</i>
					</a>
					<div class="product-icon-box-desc-buyback">
					<p class="certified-title">LIFE TIME BUY BACK / TRADE-IN TERMS AND CONDITION</p>
					<p class="certified-desc">Phasellus dolor nisi, ullamcorper ac mauris posuere, scelerisque viverra urna. Vivamus eleifend ullamcorper ex condimentum iaculis. Nunc volutpat massa id dui imperdiet interdum. Nullam quis libero sed velit pretium ornare. In vestibulum sollicitudin est, a fermentum libero. Praesent in ultricies libero. Integer eget dignissim diam. Donec volutpat ultrices auctor. Proin euismod magna ut nulla condimentum tempor. Donec at elit magna. Etiam pretium, augue at fringilla porta, neque nibh pulvinar nibh, at posuere ex dui ac enim. Nunc erat nibh, rhoncus non varius et, blandit in purus.</p>
					</div>
</div>

2 个答案:

答案 0 :(得分：0)

setInterval fadeIn和fadeOut是关键功能。 https://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/

答案 1 :(得分：0)

好吧，基于这个主题jQuery open div on hover; automatic scroll through

，我找到了一个答案，但还不是很完美。 

$(document).ready(function () {
  var $boxes = $('.boxlink');
  var $links = $('.product-link');
  var cycle = false;
  var cycle_step = 0;

  $('.productlist .product-link').mouseenter(function() {
    boxActivate(this.id);
    stopCycle();
  });

  $('.productlist .product-link').mouseleave(function() {
    cycle = setTimeout(function(){
        startCycle();
    }, 1000);
  });

  var boxActivate = function(id){
    $boxes.hide().filter('#box' + id).show();
  }
  // cycle - only when mouse is not over links
  var startCycle = function(){
    cycle = setInterval(function(){
        boxActivate($links.get(cycle_step).id);
        cycle_step++;
        if(cycle_step==$links.length) {
            cycle_step=0;
        }
    }, 3000);
  }
  var stopCycle = function(){
    clearInterval(cycle);
  }

  startCycle();

});
.product-link {
    float: left;
    width: 128px;
}

.product-icon-box-desc-certified, .product-icon-box-desc-warranty, .product-icon-box-desc-buyback, .product-icon-box-desc-shipping {
    display: none;
    width: 512px;
}

.product-link:hover {
    background: #E6DCD0;
}

.product-icon-box-desc-certified {
    display: block;
    position: relative;
    top: 0px;
    left: 0;
    background: #fff;
}

.product-icon-box-desc-warranty {
    display: block;
    position: relative;
    top: 0px;
    left: -128px;
    background: #fff;
}

.product-icon-box-desc-buyback {
    display: block;
    position: relative;
    top: 0px;
    left: -256px;
    background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productlist">
				<div id="link0" class="product-link">
					<a href="http://google.com" target="_blank">
						<img class="center-block" src="http://iceiceicy.com/wingwah/wp-content/uploads/2015/11/icon-ori.png" /> 
							<i>Authenticity & Restoration</i>
					</a>
					<div id="boxlink0" class="product-icon-box-desc-certified boxlink">
					<p class="certified-title">CERTIFIED AUTHENTIC</p>
					<p class="certified-desc">Aliquam libero lorem, rutrum vitae dolor quis, pellentesque placerat lectus. Suspendisse potenti. Sed ullamcorper dictum libero eget aliquet. In mauris est, blandit ut aliquam at, tristique ac orci. Quisque mollis, lectus in tempor bibendum, libero dui aliquet odio, vitae dictum arcu elit sit amet eros. Maecenas pellentesque nunc enim, id porta orci pretium vitae. Nam pellentesque sem vitae neque iaculis, vel tincidunt ligula mollis. In fringilla dictum tortor eu accumsan. Donec ac neque et ligula egestas venenatis. Donec malesuada ultricies posuere. Nullam risus nunc, finibus sit amet nisi ac, molestie tempor dui.</p>
					</div>
				</div>
				<div id="link1" class="product-link">
					<a href="http://google.com" target="_blank">
						<img class="center-block" src="http://iceiceicy.com/wingwah/wp-content/uploads/2015/11/icon-waranty.png" /> 
							<i>12 Months Warranty</i>
					</a>
					<div id="boxlink1" class="product-icon-box-desc-warranty boxlink">
					<p class="certified-title">CERTIFIED PRE-OWNED WATCHES WARRANTY</p>
					<p class="certified-desc">Donec ac nibh urna. Mauris porta quis lacus id efficitur. Mauris sit amet congue nunc. Nullam tellus lacus, vehicula non viverra id, fringilla eu sapien. Nulla facilisi. Pellentesque rutrum nulla in ex facilisis blandit non eu risus. Nam imperdiet sed risus fermentum tristique. Integer elementum vitae diam non volutpat. Praesent in mi blandit nunc efficitur elementum. Etiam dapibus dui dui, vitae pretium urna dapibus at.</p>
					</div>
				</div>
				<div id="link2" class="product-link">
					<a href="http://google.com" target="_blank">
						<img class="center-block" src="http://iceiceicy.com/wingwah/wp-content/uploads/2015/11/icon-buyback.png" /> 
							<i>Buy Back / Trade In Guarantee</i>
					</a>
					<div id="boxlink2" class="product-icon-box-desc-buyback boxlink">
					<p class="certified-title">LIFE TIME BUY BACK / TRADE-IN TERMS AND CONDITION</p>
					<p class="certified-desc">Phasellus dolor nisi, ullamcorper ac mauris posuere, scelerisque viverra urna. Vivamus eleifend ullamcorper ex condimentum iaculis. Nunc volutpat massa id dui imperdiet interdum. Nullam quis libero sed velit pretium ornare. In vestibulum sollicitudin est, a fermentum libero. Praesent in ultricies libero. Integer eget dignissim diam. Donec volutpat ultrices auctor. Proin euismod magna ut nulla condimentum tempor. Donec at elit magna. Etiam pretium, augue at fringilla porta, neque nibh pulvinar nibh, at posuere ex dui ac enim. Nunc erat nibh, rhoncus non varius et, blandit in purus.</p>
					</div>
</div>

现在的事情是，如何为当前.product-link div添加背景颜色？ （了解用户手动悬停时的意思）

相关问题
最新问题