logo
down
shadow

Overlapping Anchor Tags When Hovering Over One


Overlapping Anchor Tags When Hovering Over One

By : Carolyn Usinger
Date : November 21 2020, 07:31 AM
seems to work fine You can fix it by adding display: inline-block; to li.
Working Code Snippet:
code :
a {
  text-decoration: none;
  display: inline-block;
  padding: 0 10px;
  box-sizing: border-box;
}

a:hover {
  font-weight: bold;
  text-decoration: underline;
}

li + li {
  border-width: 0;
}

li {
  display: inline-block; /* <-- this! */
  height: 28px;
  line-height: 28px;
  padding: 0 5px;
  width: 100%;
}

ul {
  padding: 14px 0;
  list-style: outside none none;
}

div {
  position: absolute;
  right: 0;
  top: 72px;
  width: 150px;
}
<div>
  <ul>
    <li>
      <a href="javascript:void(0)">Test</a>
    </li>
    <li>
      <a href="javascript:void(0)">Test Longer 23 Item</a>
    </li>
    <li>
      <a href="javascript:void(0)">Test 2</a>
    </li>
  </ul>
</div>


Share : facebook icon twitter icon
hovering two html anchor tags at once

hovering two html anchor tags at once


By : Karuna Garhwal
Date : March 29 2020, 07:55 AM
I hope this helps you . You could use jQuery like in this fiddle
Basically:
CSS div that appears when hovering on anchor; keeping it visible while hovering over div

CSS div that appears when hovering on anchor; keeping it visible while hovering over div


By : Raja
Date : March 29 2020, 07:55 AM
Any of those help The problem is that the hover effect is on the element after the anchor. So when you leave the anchor, your hover effect will end to.
You could fix it like this, although it's not the cleanest solution: Set your tooltip inside your anchor, using a span
code :
<p id="soldoutinfo">
    <sup><a>?</a></sup>
    <span>Hope is not lost! <a href="#">Send us a message</a> and we will see if our stores have any in stock to ship to you.</span>
</p>
#soldoutinfo span {                                 
    display:none;
    width:0;
    height:0;
    position:absolute;
}

#soldoutinfo:hover span {                           
    display:block;
    height:60px;
    width:250px;
    background:#ffffff;
    box-shadow: 0 0 4px #888888;
    position: absolute;
    padding: 8px;
    top: 19px;
    left:12px;
    z-index:1000;
}
html5 header tags, anchor tags in nav tags are unusual/undesired height

html5 header tags, anchor tags in nav tags are unusual/undesired height


By : Jenda Bebe
Date : March 29 2020, 07:55 AM
it helps some times I've been trying format a new webpage header/nav bar with the html5 mark-up. I'm having difficulties getting my css to format things correctly. Using divs and tables I was able to produce the following: , replace your CSS with mine
code :
nav h1{
    color:lightgray;
    font-size: 150%;
    border-left:2px solid whitesmoke;
    padding:0px;
    min-width:50px;
    padding-right:30px;
}
nav a{
   float:left;
    width:20%;
    max-height:100px;
}
nav a h1:hover{
    color:lime;
}
nav{
    height:100px;
    background-color:#000000;
    box-shadow: 0px 0px 10px #000000;

}
header{
    background-color:black;
    background-position:-50px 0px;
    float:left;
    width:100%;
    max-height:100px;
}
header img.logo{
    background-size:contain;
    background-repeat:no-repeat;
    width:430px;
    float:left;
}
javascript-generated anchor tags are not visible when jumping to anchor tags on the same page

javascript-generated anchor tags are not visible when jumping to anchor tags on the same page


By : Alex Fomin
Date : March 29 2020, 07:55 AM
hope this fix your issue Scrolling to target anchors (or any #target) will be limited to the content on the page. If you are trying to scroll to the bottom of a page, the browser can only scroll so far (i.e. the bottom of the page can't scroll to the top of the window unless the window's height is very small). It's entirely possible that it is working just fine, but your scroll position just isn't reachable.
Taking that off the table, use id instead of name (as @DavidThomas described in the comments) for best compatibility.
code :
var thePs = document.querySelectorAll("p");

// Update the first paragraph to have the id that will serve as the target:
thePs[0].setAttribute("id", "top");
p:last-of-type{
  background:yellow;
}
<p><a href="#bottom">Go to bottom</a>This is a test. This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.</p>

<p>This is a test. This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.</p>

<p>This is a test. This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.</p>

<p>This is a test. This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.</p>

<p>This is a test. This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.</p>

<p>This is a test. This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.</p>

<p>This is a test. This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.</p>

<p>This is a test. This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.This is a test.</p>

<p><a href="#top">Back to Top</a></p>
<p id="bottom">This is the bottom. I'll never be scrollable to the top of the browser window unless the window's height is very small.</p>
Smooth scroll for specific anchor tags not for all anchor tags

Smooth scroll for specific anchor tags not for all anchor tags


By : soni mishty
Date : March 29 2020, 07:55 AM
wish of those help I am trying to implement the smooth scroll when user click on the anchor tag then it will scroll and reach the target. it's working perfectly with all the anchor tag. , you can add main class for smooth scrolled link
at line 30
code :
    $(document).on("click", ".main_tab a[href^=#]", function(e) {
Related Posts Related Posts :
  • Adding a drop down transition to CSS Menu
  • CSS Media Queries not kicking in when there supposed to
  • Video JS - poster image cover/contain
  • center the div absolute using css but i cannot figure out why its not moving to centre
  • simple css code, i dont understand
  • Autoformatting LESS code with vim
  • Can we use different CSS language/pre processors for different components in a Angular Project
  • combined multiple classes into one css rule
  • Detect mobile device browsers, not only screen width
  • CSS folded corners of div with shadow
  • bootstrap 3: why do my <div>s stack from 992 px width onwards when using "col-sm-6"
  • IE7, IE8 support for css3 media query
  • Gradient ends are blurry when using pixel measurements
  • display bootstrap popovers outside divs with overflow:hidden
  • How to make a non responsive site by using Bootstrap?
  • Selecting an element that doesn't have a child with a certain class
  • Embedded Twitter Widget Height issue
  • Twitter Bootstrap - How to get buttons to be block level only on extra small and small devices
  • How can I add a vertical scrollbar to my div automatically?
  • Trouble changing the link font color using typography.js in gatsby
  • Nesting up scss with main.scss and subcomponent scss files
  • Why does my FontSquirrel font not work?
  • Div positioning (overlays when not wanted)
  • Align button vertically in alert field
  • CSS: display: flex and text ellipsis on the same element
  • Fixed position buttons appearing in incorrect area depending on browser
  • CSS-menu issue in angular project
  • Responsive Website - general enquiries
  • Webkit Scrollbar Buttons only showing horizontal
  • explicitly set a field's width in css to "no-auto"
  • Jekyll accessing page variables from CSS
  • Why did my #wrapDesktopNavBar disappear on desktop view?
  • CSS Menu Multiple Hover Colo(u)rs
  • Line-height works differently on Mac and Windows
  • Resizing an image at will with CSS?
  • CSS Naming Best Practice in MVC Layouts
  • FireFox & Chrome CSS Differs
  • Gradient Border Causing the Border to Disappear
  • How to hide column label on google chart
  • How to change H3 color in bootstrap using CSS file
  • CSS How to align checkbox image
  • css3 jagged edge on left isntead of right
  • display text in a horizontal line , using ng-repeat and bootstrap
  • Css right top corner
  • Bootstrap keep button other border gradient when removing border-left
  • Getting divs in the right postion
  • Rails 4: Sass raises SyntaxError when precompiling assets on server but not on development computer
  • Boostrap css file overrode my css file
  • Why are placeholder selectors inside @keyframes valid .scss?
  • Create a 4x4 responsive grid of squares with a margin of 20px on each side of the container?
  • CSS Not Selector: Select All Except Inside of Element
  • CSS Intellisense for files not in solution
  • Any way to keep Susy from changing font-size automatically?
  • In Chrome’s user agent stylesheet, why use "-webkit-margin-before" et al instead of just "margin-top"
  • Responsive slanted border
  • SCSS variables - same name, different value in different media breakpoints
  • How to create overlay over div without defining it in HTML
  • Using negative values fails the execution in SASS
  • up/down arrow key issue with typeahead control (angular bootstrap UI)
  • increase size of search terms in a magento site by applying css class-name
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org