我做了一个工具提示onclick列，所以第一列的名称是“popup”，工具提示的名称是“popuptext”id =“myPopup”，在那之下我做了一个新的div全宽名称“drugi”，当你点击在第一列“drugi”填充下来，应该有一个“popuptext”，但那是一半看不见的。您可以在此处查看并测试：https://www.reskque.com/live-events/
CSS
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
var padding = jQuery('.drugi').css('padding-top');
var newPadding = (padding=='360px')?'90px':'360px';
jQuery('.drugi').css('padding-top',newPadding);
}
function myFunction1() {
var popup1 = document.getElementById("myPopup1");
popup1.classList.toggle("show");
var padding = jQuery('.drugi').css('padding-top');
var newPadding = (padding=='360px')?'90px':'360px';
jQuery('.drugi').css('padding-top',newPadding);
}
function myFunction2() {
var popup2 = document.getElementById("myPopup2");
popup2.classList.toggle("show");
var padding = jQuery('.drugi').css('padding-top');
var newPadding = (padding=='360px')?'90px':'360px';
jQuery('.drugi').css('padding-top',newPadding);
}.cijeli {
width:100%;
margin-left: 20px;
margin:0 auto;
overflow: hidden;
margin-top:30px;
padding-bottom: 30px;
}
.drugi {
z-index: 1;
padding-top:20px;
width:100%;
margin-left: 20px;
margin:0 auto;
overflow: hidden;
margin-top:30px;
padding-bottom: 30px;
}
.prva-kol {
margin-left: 20px;
position: relative;
display: inline-block;
width: 370px;
height: 380px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
border-radius: 5px;
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow : 0 10px 50px rgba(0,0,0,0.08), 0 13px 45px rgba(0,0,0,0.08);
z-index: 100;
}
.druga-kol {
margin-left: 20px;
position: relative;
display: inline-block;
width: 370px;
height: 380px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
border-radius: 5px;
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow : 0 10px 50px rgba(0,0,0,0.08), 0 13px 45px rgba(0,0,0,0.08);
z-index: 101;
}
.treca-kol {
margin-left: 20px;
position: relative;
display: inline-block;
width: 370px;
height: 380px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
border-radius: 5px;
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow : 0 10px 50px rgba(0,0,0,0.08), 0 13px 45px rgba(0,0,0,0.08);
z-index: 102;
}
.prva-kol-siroka {
margin-left: 20px;
position: relative;
display: inline-block;
width: 580px;
height: 380px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
border-radius: 5px;
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow : 0 10px 50px rgba(0,0,0,0.08), 0 13px 45px rgba(0,0,0,0.08);
z-index: 1;
}
.druga-kol-siroka {
margin-left: 20px;
position: relative;
display: inline-block;
width: 580px;
height: 380px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
border-radius: 5px;
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow : 0 10px 50px rgba(0,0,0,0.08), 0 13px 45px rgba(0,0,0,0.08);
z-index: 1;
}
.cijeli .prva-kol {
z-index: 999;
float: left;
width:370px;
height: 380px;
padding-top: 7px;
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow : 0 10px 50px rgba(0,0,0,0.08), 0 13px 45px rgba(0,0,0,0.08);
}
.cijeli .druga-kol {
float: left;
width:370px;
height: 380px;
padding-top: 7px;
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow : 0 10px 50px rgba(0,0,0,0.08), 0 13px 45px rgba(0,0,0,0.08);
}
.cijeli .treca-kol {
float: left;
width:370px;
height: 380px;
padding-top: 7px;
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow : 0 10px 50px rgba(0,0,0,0.08), 0 13px 45px rgba(0,0,0,0.08);
}
.drugi .prva-kol-siroka {
float: left;
width:565px;
height: 380px;
padding-top: 7px;
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow : 0 10px 50px rgba(0,0,0,0.08), 0 13px 45px rgba(0,0,0,0.08);
}
.drugi .druga-kol-siroka {
float: left;
width:565px;
height: 380px;
padding-top: 7px;
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
box-shadow : 0 10px 50px rgba(0,0,0,0.08), 0 13px 45px rgba(0,0,0,0.08);
z-index: 1;
}
/*TOOLTIP*/
.popup {
position: relative;
z-index: 30;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 1200px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
z-index: 1;
bottom: 125%;
left: 50%;
margin-right: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
/*TOOLTIP*/
.popup1 {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup1 .popuptext {
visibility: hidden;
width: 1200px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
z-index: 1;
bottom: 125%;
left: 50%;
margin-right: -80px;
}
/* Popup arrow */
.popup1 .popuptext::after {
content: "";
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/*TOOLTIP*/
.popup2 {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup2 .popuptext {
visibility: hidden;
width: 1200px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
z-index: 1;
bottom: 125%;
left: 50%;
margin-right: -80px;
}
/* Popup arrow */
.popup2 .popuptext::after {
content: "";
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup2 .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/*KRAJ POPUP*/
.moj-button {
margin-top: -5px;
margin-left: 15px;
padding: 8px 14px;
border-radius: 10px;
background-color: white;
color: black;
border: 2px solid #f44336;
}
.moj-button:hover {
background-color: #f44336;
color: white;
}<div class="cijeli">
<div class="popup" onclick="myFunction()" style=" box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
border-radius: 5px;
margin-left: 15px;
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow : 0 10px 50px rgba(0,0,0,0.08), 0 13px 45px rgba(0,0,0,0.08); width: 380px; height: 350px; float:left; background-image: url('http://www.reskque.com/wp-content/uploads/2018/01/1.jpg'); background-repeat: no-repeat;">
<p style="text-align: left; margin-left: 15px; margin-bottom: -35px; font-family: Roboto; font-size: 17px; padding-top: 210px;"><strong><span style="color: #000000;">The Brand You</span></strong></p>
<hr style="border-style: solid; float:left; margin-left: 15px; border-color: red; border-width: 2px; width: 10%;">
<br><h5 style="font-weight: normal; margin-bottom: -10px; text-align: left; margin-left: 15px;">Sun, Feb 2018 - 8.00pm</h5>
<audio controls style="margin-top: 9px; width: 100%;">
<source src="http://www.reskque.com/wp-content/uploads/2016/05/Resk-Speak-Fade-Out-1.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div class="popuptext" id="myPopup" style="width: 1200px; opacity: 0.8; font-family: Open Sans;"><span style="font-weight: bold; color: red;">The Brand You</span>
<br><span style="font-weight: normal;">Sun, Feb 2018 - 8.00pm</span>
<br><hr style="border-style: solid; border-color: red; border-width: 2px; width: 20%;">
<br>
<ul id="navlist">
<li><a href="#"><i class="fa fa-facebook" style="background-color: #000;"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" style="background-color: #000;"></i></a></li>
<li><a href="#"><i class="fa fa-instagram" style="background-color: #000;"></i></a></li>
<li><a href="#"><i class="fa fa-youtube" style="background-color: #000;"></i></a></li>
</ul>
<br><span style="text-align: center; line-height: 100%;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </span>
<br>
<br><span style="font-weight: bold; font-size: 13px; color: red;">Only 30 tickets left!</span>
<br><a href='whats-your-concept' class='buttton'>See Event Dates and Cities</a>
</div>
</div>
<div class="popup1" onclick="myFunction1()" style=" box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
border-radius: 5px;
margin-left: 15px;
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow : 0 10px 50px rgba(0,0,0,0.08), 0 13px 45px rgba(0,0,0,0.08); width: 380px; height: 350px; float:left; background-image: url('http://www.reskque.com/wp-content/uploads/2018/01/1.jpg'); background-repeat: no-repeat;">
<p style="text-align: left; margin-left: 15px; margin-bottom: -35px; font-family: Roboto; font-size: 17px; padding-top: 210px;"><strong><span style="color: #000000;">The Brand You</span></strong></p>
<hr style="border-style: solid; float:left; margin-left: 15px; border-color: red; border-width: 2px; width: 10%;">
<br><h5 style="font-weight: normal; margin-bottom: -10px; text-align: left; margin-left: 15px;">Sun, Feb 2018 - 8.00pm</h5>
<br><button class="moj-button">Details</button>
<audio controls style="margin-top: 9px; width: 100%;">
<source src="http://www.reskque.com/wp-content/uploads/2016/05/Resk-Speak-Fade-Out-1.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div class="popuptext" id="myPopup1" style="width: 1200px; opacity: 0.8; font-family: Open Sans;"><span style="font-weight: bold; color: red;">The Brand You</span>
<br><span style="font-weight: normal;">Sun, Feb 2018 - 8.00pm</span>
<br><hr style="border-style: solid; border-color: red; border-width: 2px; width: 20%;">
<br>
<ul id="navlist">
<li><a href="#"><i class="fa fa-facebook" style="background-color: #000;"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" style="background-color: #000;"></i></a></li>
<li><a href="#"><i class="fa fa-instagram" style="background-color: #000;"></i></a></li>
<li><a href="#"><i class="fa fa-youtube" style="background-color: #000;"></i></a></li>
</ul>
<br><span style="text-align: center; line-height: 100%;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </span>
<br>
<br><span style="font-weight: bold; font-size: 13px; color: red;">Only 30 tickets left!</span>
<br><a href='whats-your-concept' class='buttton'>See Event Dates and Cities</a>
</div>
</div>
<div class="popup2" onclick="myFunction2()" style=" box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
border-radius: 5px;
margin-left: 15px;
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
box-shadow : 0 10px 50px rgba(0,0,0,0.08), 0 13px 45px rgba(0,0,0,0.08); width: 380px; height: 350px; float:left; background-image: url('http://www.reskque.com/wp-content/uploads/2018/01/1.jpg'); background-repeat: no-repeat;">
<p style="text-align: left; margin-left: 15px; margin-bottom: -35px; font-family: Roboto; font-size: 17px; padding-top: 210px;"><strong><span style="color: #000000;">The Brand You</span></strong></p>
<hr style="border-style: solid; float:left; margin-left: 15px; border-color: red; border-width: 2px; width: 10%;">
<br><h5 style="font-weight: normal; margin-bottom: -10px; text-align: left; margin-left: 15px;">Sun, Feb 2018 - 8.00pm</h5>
<br><button class="moj-button">Details</button>
<audio controls style="margin-top: 9px; width: 100%;">
<source src="http://www.reskque.com/wp-content/uploads/2016/05/Resk-Speak-Fade-Out-1.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div class="popuptext" id="myPopup2" style="width: 1200px; opacity: 0.8; font-family: Open Sans;"><span style="font-weight: bold; color: red;">The Brand You</span>
<br><span style="font-weight: normal;">Sun, Feb 2018 - 8.00pm</span>
<br><hr style="border-style: solid; border-color: red; border-width: 2px; width: 20%;">
<br>
<ul id="navlist">
<li><a href="#"><i class="fa fa-facebook" style="background-color: #000;"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" style="background-color: #000;"></i></a></li>
<li><a href="#"><i class="fa fa-instagram" style="background-color: #000;"></i></a></li>
<li><a href="#"><i class="fa fa-youtube" style="background-color: #000;"></i></a></li>
</ul>
<br><span style="text-align: center; line-height: 100%;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </span>
<br>
<br><span style="font-weight: bold; font-size: 13px; color: red;">Only 30 tickets left!</span>
<br><a href='whats-your-concept' class='buttton'>See Event Dates and Cities</a>
</div>
</div>
</div>
<div class="drugi">
<div class="prva-kol-siroka" style="float:left; background-image: url('http://www.reskque.com/wp-content/uploads/2018/01/2.jpg'); background-repeat: no-repeat;">
<p style="text-align: left; margin-left: 15px; margin-bottom: -35px; font-family: Roboto; font-size: 17px; padding-top: 210px;"><strong><span style="color: #000000;">The Brand You</span></strong></p>
<hr style="border-style: solid; float:left; margin-left: 15px; border-color: red; border-width: 2px; width: 10%;">
<br><h5 style="font-weight: normal; margin-bottom: -10px; text-align: left; margin-left: 15px;">Sun, Feb 2018 - 8.00pm</h5>
<br><button class="moj-button" onclick="myFunction3()">Details</button>
<audio controls style="margin-top: 9px; width: 100%;">
<source src="http://www.reskque.com/wp-content/uploads/2016/05/Resk-Speak-Fade-Out-1.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
<div class="druga-kol-siroka" style="float:left; background-image: url('http://www.reskque.com/wp-content/uploads/2018/01/4-siroka.jpg'); background-repeat: no-repeat;">
<p style="text-align: left; margin-left: 15px; margin-bottom: -35px; font-family: Roboto; font-size: 17px; padding-top: 210px;"><strong><span style="color: #000000;">The Brand You</span></strong></p>
<hr style="border-style: solid; float:left; margin-left: 15px; border-color: red; border-width: 2px; width: 10%;">
<br><h5 style="font-weight: normal; margin-bottom: -10px; text-align: left; margin-left: 15px;">Sun, Feb 2018 - 8.00pm</h5>
<br><button class="moj-button" onclick="myFunction4()">Details</button>
<audio controls style="margin-top: 9px; width: 100%;">
<source src="http://www.reskque.com/wp-content/uploads/2016/05/Resk-Speak-Fade-Out-1.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div class="tooltiptext4" id="myPopup4" style="width: 1200px; opacity: 0.8; font-family: Open Sans;"><span style="font-weight: bold; color: red;">What's Your Concept</span>
<br><span style="font-weight: normal;">Sun, Feb 2018 - 8.00pm</span>
<br><hr style="border-style: solid; border-color: red; border-width: 2px; width: 20%;">
<br>
<ul id="navlist">
<li><a href="#"><i class="fa fa-facebook" style="background-color: #000;"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" style="background-color: #000;"></i></a></li>
<li><a href="#"><i class="fa fa-instagram" style="background-color: #000;"></i></a></li>
<li><a href="#"><i class="fa fa-youtube" style="background-color: #000;"></i></a></li>
</ul>
<br><span style="text-align: center; line-height: 100%;"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </span>
<br>
<br><span style="font-weight: bold; font-size: 13px; color: red;">Only 30 tickets left!</span>
<br><a href='whats-your-concept' class='buttton'>See Event Dates and Cities</a>
</div>
</div>
</div>