仅在显示工具提示时保持具有悬停效果的元素可见

Question

我有一个隐藏的锚元素，只有将鼠标悬停在它上面才能看到它。当用户单击锚点时，会出现一个自定义工具提示，其中包含锚点的本机链接。工具提示一直显示，直到用户单击“x”按钮或它之外的某个位置。我希望在显示工具提示时保持锚点（具有悬停效果）可见，并且当工具提示未显示时，锚点应再次隐藏并仅通过悬停可见。

$('a.anchor').click(function(event) {
  event.stopPropagation();
  var thistool = $(this).parent().find('div.tooltip');
  $('div.tooltip').not(thistool).hide();
  thistool.toggle();
  thistool.find('input').select();
});

$('.icon-decline').on('click', function() {
  $(this).parent().hide();
});

$('div.tooltip').on('click', function(event) {
  event.stopPropagation();
});

$(document).on('click', function() {
  $('div.tooltip').hide();
});

span {
  position: relative;
}

.tooltip {
  display: none;
  position: absolute;
  font-size: 15px;
  line-height: 20px;
  font-weight: normal;
  color: #7b7a79;
  width: auto;
  white-space: nowrap;
  text-align: center;
  box-sizing: border-box;
  border-radius: 6px;
  background: #fff;
  z-index: 1;
  right: -208px;
  bottom: -11%;
  border: 2px solid #7b7a79;
}

.tooltip-arrow {
  top: 50%;
  left: -9px;
  margin-top: -5px;
  border-top: 5px solid transparent;
  border-right: 7px solid #7b7a79;
  border-bottom: 5px solid transparent;
}

.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
}

.tooltip-inner {
  max-width: 200px;
  padding: 10px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background-color: #eff4f9;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

input {
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
  background-color: #eff4f9;
}

.icon-decline {
  display: block;
  float: right;
  position: relative;
  top: -4px;
  right: 2px;
  height: 20px;
  cursor: pointer;
}

.anchor i {
  visibility: hidden;
}

h1:hover .anchor i {
  visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="intro">
<span>Intro
<div class="tooltip" style="display: none;">
<i class="icon-decline">X</i>
<div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
  <input type="text" id="theInput" onfocus="this.select();" readonly="readonly" dir="rtl" value="http://local/someurl/somemore/#intro">
  </div>
  </div>
  <a href="#intro" class="anchor">
  <i class="icon-chain-link">#</i>
  </a>
 </span>
</h1>

Answer 1

请看示例，似乎可以满足您的需求？

基本上我创建了一个 css 类，当工具提示显示时我添加和删除它。还将可见性更改为显示。

相关部分

CSS

.icon-chain-link {
  display: none;
}

h1:hover .icon-chain-link {
  display: inherit;
}

.icon-show {
  display: inherit;
}

Javascript 这些行

$(this).find("i").addClass("icon-show");
$(".icon-chain-link").removeClass("icon-show");

$('a.anchor').click(function(event) {
  event.stopPropagation();
  $(this).find("i").addClass("icon-show");
  var thistool = $(this).parent().find('div.tooltip');
  $('div.tooltip').not(thistool).hide();
  thistool.toggle();
  thistool.find('input').select();
});

$('.icon-decline').on('click', function() {
  $(this).parent().hide();
  $(".icon-chain-link").removeClass("icon-show");
});

$('div.tooltip').on('click', function(event) {
  event.stopPropagation();
});

$(document).on('click', function() {
  $('div.tooltip').hide();
  $(".icon-chain-link").removeClass("icon-show");
});

span {
  position: relative;
}

.tooltip {
  display: none;
  position: absolute;
  font-size: 15px;
  line-height: 20px;
  font-weight: normal;
  color: #7b7a79;
  width: auto;
  white-space: nowrap;
  text-align: center;
  box-sizing: border-box;
  border-radius: 6px;
  background: #fff;
  z-index: 1;
  right: -208px;
  bottom: -11%;
  border: 2px solid #7b7a79;
}

.tooltip-arrow {
  top: 50%;
  left: -9px;
  margin-top: -5px;
  border-top: 5px solid transparent;
  border-right: 7px solid #7b7a79;
  border-bottom: 5px solid transparent;
}

.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
}

.tooltip-inner {
  max-width: 200px;
  padding: 10px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background-color: #eff4f9;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

input {
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
  background-color: #eff4f9;
}

.icon-decline {
  display: block;
  float: right;
  position: relative;
  top: -4px;
  right: 2px;
  height: 20px;
  cursor: pointer;
}

.icon-chain-link {
  display: none;
}

h1:hover .icon-chain-link {
  display: inherit;
}

.icon-show {
  display: inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="intro">
<span>Intro
<div class="tooltip" style="display: none;">
<i class="icon-decline">X</i>
<div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
  <input type="text" id="theInput" onfocus="this.select();" readonly="readonly" dir="rtl" value="http://local/someurl/somemore/#intro">
  </div>
  </div>
  <a href="#intro" class="anchor">
  <i class="icon-chain-link">#</i>
  </a>
 </span>
</h1>

Answer 2

这可能是一种解决方案，当工具提示可见时向父元素添加一个类，我希望这可以帮助你:)

$('a.anchor').click(function(event) {
  event.stopPropagation();
  var thistool = $(this).parent().find('div.tooltip');
  $(this).closest('h1').toggleClass('tooltip-open');
  thistool.find('input').select();
});

$('.icon-decline').on('click', function() {
  $(this).closest('h1').removeClass('tooltip-open');
});

$('div.tooltip').on('click', function(event) {
  event.stopPropagation();
});

$(document).on('click', function() {
  $('h1').removeClass('tooltip-open');
});

span {
  position: relative;
}

.tooltip {
  display: none;
  position: absolute;
  font-size: 15px;
  line-height: 20px;
  font-weight: normal;
  color: #7b7a79;
  width: auto;
  white-space: nowrap;
  text-align: center;
  box-sizing: border-box;
  border-radius: 6px;
  background: #fff;
  z-index: 1;
  right: -208px;
  bottom: -11%;
  border: 2px solid #7b7a79;
}

.tooltip-arrow {
  top: 50%;
  left: -9px;
  margin-top: -5px;
  border-top: 5px solid transparent;
  border-right: 7px solid #7b7a79;
  border-bottom: 5px solid transparent;
}

.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
}

.tooltip-inner {
  max-width: 200px;
  padding: 10px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background-color: #eff4f9;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.tooltip-open .tooltip{
  display: block;
}

input {
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
  background-color: #eff4f9;
}

.icon-decline {
  display: block;
  float: right;
  position: relative;
  top: -4px;
  right: 2px;
  height: 20px;
  cursor: pointer;
}

.anchor i {
  visibility: hidden;
}

h1:hover .anchor i, .tooltip-open .anchor i {
  visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="intro">
<span>Intro
<div class="tooltip">
<i class="icon-decline">X</i>
<div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
  <input type="text" id="theInput" onfocus="this.select();" readonly="readonly" dir="rtl" value="http://local/someurl/somemore/#intro">
  </div>
  </div>
  <a href="#intro" class="anchor">
  <i class="icon-chain-link">#</i>
  </a>
 </span>
</h1>