Encountering an issue with getting a glyphicon link to appear when hovering over text.
This specific div is in my HTML.
<div class="editable container">
<h1>File Name: filename<a href="#"><span class="pencil glyphicon glyphicon-pencil"></span></a></h1>
</div>
Accompanied by this CSS and JS.
CSS:
.editable span.pencil{
float: right;
}
.editable h1 .pencil{
display: none;
}
JS:
$(document).ready(function(){
$('.editable h1').hover(function(){
$(this).children('span.pencil').css({'display' : 'inline-block'});
},function(){
$(this).children('span.pencil').css({'display' : 'none'});
});
});
The concept is that upon hovering over the text "File Name: filename," a pencil glyphicon should show up at the far right of the container (which must be a link).
However, I've encountered an issue where it doesn't work as expected. Removing the 'a' tags makes it function, but currently, the only workaround is changing
$('.editable h1')
to
$('.editable a')
while inserting some text within the 'a' tags. This results in needing to hover over that specific text rather than the entire h1 element.
I aim for the glyphicon to become visible as a link upon hovering over h1. However, the exact cause of the issue is still unclear.