只有在显示工具提示时才能看到悬停效果元素

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>