0
이것은 스타일 전문가에게 간단해야합니다. 도면에서 Stay-on-top CSS 툴팁
DIV의 이미지이다. A에서 마우스를 가져 가면 툴팁이 표시되지만 B는이를 숨기고 있습니다. 필요한 결과는 툴팁이 B에 의해 가려져서는 안된다는 것입니다.
Relevant CSS
.shops
{
margin-left: 28%;
margin-top: 2%;
width:auto;
height: 13%;
padding: 8px;
border-radius: 6px;
overflow-y: auto;
box-shadow: 1px 1px 1px 1px darkgray;
}
.sHeader
{
background-color: white;
padding: 2px;
color: darkgray;
text-align: left;
top: 648px;
width: auto;
left: 30%;
position: fixed;
}
.resultsDiv
{
margin-top: 10px;
}
.sFront
{
width: 110px;
height: auto;
z-index: 1000;
position: relative;
top: 0;
left: 0;
}
.logo-container
{
display: inline-table;
perspective: 1000px;
width: 110px;
height: auto;
}
.logo
{
margin: 1px;
float: left;
display: table-cell;
flex-flow: row wrap;
transition: 0.6s;
}
.logo_img
{
display: block;
margin:auto;
width: 50%;
}
.logo .tooltiptext
{
visibility: hidden;
font-size: 12px;
width: 245px;
height: auto;
background-color: black;
color: lightgray;
text-align: left;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: -1;
left: 80%;
opacity: 0;
transition: opacity 1s;
}
.logo .tooltiptext::after {
content: "";
position: absolute;
top: 35%;
right: 100%;
margin-top: -15px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.logo:hover .tooltiptext
{
visibility: visible;
display: block;
opacity: 1;
}
function drawCard(array)
{
var sResultsDiv = document.getElementById('sResults');
sResultsDiv.innerHTML = "";
var html = [""];
$.each(array, function(cardNum, value)
{
logoID = "logo" + cardNum;
logo = array[cardNum].logo;
logo = logo.replace("..", "gs");
name = array[cardNum].name;
addr = array[cardNum].address;
mob = "Mob.: " + array[cardNum].mobile;
ll = "Land: " + array[cardNum].landline;
tooltiptext = '<b>' + name + '</b><br/>' + addr + '<br/>' + mob + ' | ' + ll;
htmlFString = [ '<div class="logo-container">',
'<div>',
'<div class="logo sFront" id=sf' + cardNum + '>',
'<div class="tooltiptext">' + tooltiptext + '</div>',
'<img id="' + logoID + '" src="' + logo + '" class="logo_img">',
'</div>',
'</div>',
'</div>'
].join('');
html += htmlFString;
});
sResultsDiv.innerHTML = html;
} // of drawCard(cardData, cardNum)
Relevant JavaScript/JQuery
<html>
<head>
<titleMy Website</title>
<script src="mywebsite.js"></script>
<script src="jq_js/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="bs/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/mywebsite.css">
<link href='//fonts.googleapis.com/css?family=Lobster' rel='stylesheet'>
<link href='//fonts.googleapis.com/css?family=Lobster Two' rel='stylesheet'>
<script src="bs/js/bootstrap.min.js"></script>
</head>
<body onload = "javascript: isShopperLoggedIn();">
<div class="marginate">
<div id ="headerStrip" class = "bkwhite well well-sm">
<img align="middle" src="images/logo_small.jpg" alt="mywebsite"/>
:
:
:
<!-- Shops results -->
<div class="shops">
<div class="sHeader">
<p id = "srTitle" class="sTitle"></p>
</div>
<div id="sResults" class="resultsDiv">
</div>
</div>
</div>
</body>
</html>
Relevant HTML
overflow: visible (거의 모든 클래스에 있음)을 사용해 보았습니다.
누락 된 부분을 알려주십시오.
미리 감사드립니다.
'z-index'를 높은 수로 설정하십시오. –
Z- 색인을 무언가로 설정하십시오. 1000 – imprezzeb
@RobbyCornelissen, 감사합니다! 위의 유일한 클래스에서 'z-index : 9999'로 변경했습니다. 행운을 빌어 요 ... –