Сделайте три автозапуска div и покажите их скрытый текст

У меня есть три 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>


person iceiceicy    schedule 01.08.2018    source источник
comment
Я немного смущен тем, что вы спрашиваете. Итак, вместо наведения вы хотите, чтобы они просто последовательно отображали скрытый текст?   -  person CodeSpent    schedule 01.08.2018
comment
@CodeSpent Я хочу сохранить функцию наведения. И когда никто не наводит курсор на этот div, да, просто последовательно показывать скрытый текст. (Пример: Показать скрытый текст «Подлинность и восстановление» -> Показать скрытый текст «Гарантия 12 месяцев» и т. д.   -  person iceiceicy    schedule 01.08.2018


Ответы (2)


setInterval fadeIn и fadeOut являются ключевыми функциями. https://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/

person Yuanjie Meng    schedule 01.08.2018
comment
Завершите изучение, но я думаю, что это немного отличается от моей настройки html. У меня при наведении курсора на один из div отображается div под ним + коричневый фон для логотипа. Хотя, если я использую приведенный выше пример, он будет вращаться только с отображением логотипа. - person iceiceicy; 03.08.2018
comment
Я думаю, что логика, которую мне нужно сделать, заключается в том, чтобы установить временной интервал для этих div, чтобы они находились в состоянии наведения в течение определенного периода времени и продолжали вращаться - person iceiceicy; 03.08.2018
comment
Ответы должны включать код. Со ссылками все в порядке, но ответ должен иметь значение когда ссылка не работает. Поместите достойный пример кода в ответ или это не более чем комментарий. - person Reinstate Monica Cellio; 03.08.2018
comment
Спасибо за совет. - person Yuanjie Meng; 03.08.2018

ОК, я нашел ответ, но еще не идеальный, на основе этой темы jQuery открыть div при наведении; автоматическая прокрутка

$(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>

Теперь дело в том, как я могу добавить цвет фона для текущего элемента div .product-link? (Посмотрите, что я имею в виду, когда пользователь наводит курсор вручную)

person iceiceicy    schedule 03.08.2018