只有在显示工具提示时，才能保持具有悬停效果的元素

时间：2017-03-06 23:33:46

标签： javascript jquery css

我有一个隐藏的锚元素，只有悬停在它上面才能看到它。当用户单击锚点时，会出现一个自定义工具提示，其中包含锚点的本机链接。工具提示正在显示，直到用户单击“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>

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

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

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

相关问题
最新问题