只有在顯示工具提示時才能看到懸停效果元素

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>