Question

对于风格专家来说，这应该很简单。

在上图中，A和B是DIV中的图像。将鼠标悬停在A上会显示工具提示，但B会遮挡它。所需的结果是工具提示不应该被B模糊，很显然。

Relevant HTML

<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 JavaScript / JQuery

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 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;
}

在SO上看到了许多解决方案，但没有一个能够专门解决这个问题。在其他建议的事情中，尝试overflow: visible（在几乎所有类中）都无济于事。

请告诉我遗漏的内容。

非常感谢提前！

Answer 1

如果没有看到一些HTML，很难确定问题是什么。

我创造了一个小提琴here。对于工具提示文字，我最终删除了您的left: 80%并使用了margin-left。赔率这对你不起作用，因为我无法从你的CSS推断你的HTML标记是什么样的。如果您更新了问题，我可以更好地协助解决问题。

修改抱歉耽搁了。查看完代码后，您的javascript中会出现一些小错误，您可以在其中动态创建元素。你在你的img元素上缺少一个结束标记，看起来你有一个额外的封闭div元素似乎没有用处。

你工具提示的主要原因是你没有按预期工作，因为

在.logo .tooltiptext中将z-index:-1更改为更大的内容，如101，并将left:80%更改为20％

在.logo-container删除perspective:1000

在.sFront删除position:relative

如果你这样做，我认为它会按你的意愿运作。这是一个jsfiddle。希望有所帮助！

保持最佳的CSS工具提示

1 个答案: