I prefer to have the links activate when the mouse hovers over them, rather than when hovering over empty

Is there a way to prevent the bottom links (music, contact, archive) from being highlighted when the mouse hovers over the empty space between them and not just on the actual links themselves? I want the mouse to only react to the links it hovers over and ignore the empty spaces. Any suggestions on how to achieve this within this platform would be greatly appreciated! If necessary, I can provide the full code for the blog.

/*header*/

header {
    width:{select:post width}px;
    margin:140px auto 0 auto;
    text-align:center;
    font-family: inconsolata;
    position:relative;
    -webkit-animation-name: none-in;
    -webkit-animation-duration: 2.5s;    
}

.ico {
    display:block;
    margin-bottom:35px;
}

.ico img { /*icon*/
    margin:0 auto;    
    width:60px;
    height:60px;
    border-radius:100%;
    -webkit-border-radius:100%;
    -moz-border-radius:100%;
}

.about {
    position:relative;
    height:0px;
    overflow:hidden; 
}

.desc {
    padding:25px 0;
    opacity:0;
}

.dnav {margin-top:10px;
       margin-bottom: 110px;
}

.dnav a {
    font-family: inconsolata; 
    font-size: 11px; 
    letter-spacing:3px;
    text-transform:lowercase;
    display:inline-block;
    
    
}

.dnav a:after {
    content:'';
    color:{color:link}!important;    
    padding-left:15px;
}

.dnav a:hover::after {color:{color:link}!important;}

.dnav a:last-of-type::after {display:none;}


nav {
    font-family: inconsolata; 
    font-size: 11px; 
    letter-spacing:3px;
    text-transform:uppercase; 
}

nav a {margin:0 0px;}

#blogt {
    
    font-size: 11px;
    font-weight:bold;
        /*color:{color:title};*/ 
    
}
<body>

<header>
{block:ifIconImage}<a href="/" class="ico"><img src="{image:Icon}"></a>{/block:ifIconImage}
    <nav>{block:ifAskTitle}<a href="/ask">{text:ask title}</a>{/block:ifAskTitle}{block:ifProfileTitle}<a class="pro">{text:profile title}</a>{/block:ifProfileTitle}<a id="blogt" href="/">{Title}</a>{block:ifArchiveTitle}<a href="/archive">{text:archive title}</a>{/block:ifArchiveTitle}</nav>
    <div class="about"><div class="desc">{Description}</div></div>
    
    <div class="dnav">{block:ifLink1}<a href="{text:Link 1 URL}">{text:Link 1}</a>{/block:ifLink1}{block:ifLink2}<a href="{text:Link 2 URL}">{text:Link 2}</a>{/block:ifLink2}{block:ifLink3}<a href="{text:Link 3 URL}">{text:Link 3}</a>{/block:ifLink3}</div>
    </div></div>
</header>

csstumblr

Answer №1

Indeed, when it comes to padding, it's important to consider that it is part of the element and can trigger the mouseOver event upon hovering.

You might want to experiment with margins as an alternative solution.

Answer №2

The selector ".dnav a:after" is responsible for extending the text styling in CSS.

To adjust spacing, you can directly add margin to the "a" element using the selector ".dnav a", instead of relying on the properties defined within the ".dnav a:after" selector.

For example:

Remove this snippet:

.dnav a:after {
    content:'';
    color:{color:link}!important;    
    padding-left:15px;
}

Instead, modify like so (by simply adding margin):

.dnav a {
    font-family: inconsolata; 
    font-size: 11px; 
    letter-spacing:3px;
    text-transform:lowercase;
    display:inline-block;
    margin-left: 15px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The footer fails to remain at the bottom of the page when there is limited content available

Despite searching extensively on Google, I have not been able to find a solution to this frequently asked question. My challenge is to consistently position the footer at the bottom of the page, even when there is minimal content present. Below is an exce ...

htmlcsslaravellaravel-bladetailwind-css

Discovering Characters in String using jQuery and Implementing a Personalized Class

Update: To achieve the desired typography, I will need to implement some creative jquery / css techniques. The first step is to create a class called .underlined which will allow me to have complete control over the underline by setting a background imag ...

jquerycssregexstring

I added an onClick event to an SVG image, however, I am struggling to get the event to execute a jQuery if/else statement

I've been working on creating an SVG map of the US, and I'm almost finished. The final step involves implementing a simple if-else statement to prompt users for the name of the state when they click on it. My goal is to fill the state green if th ...

javascriptjquerycsssvg

Mobile-formatted inline Bootstrap

Using bootstrap and seeking to have elm1, elm2, and elm3 displayed inline on mobile devices? Take a look at the code snippet below: <div class="container-fluid"> <div class="form-group"> <label class="control-label col-sm ...

csstwitter-bootstrapresponsive-design

What is the best method for styling the "body" of multiple pages in a React.js application to prevent them from overlapping?

Hello everyone, After attempting different approaches in numerous ways, I have turned to the experts here who are sure to have the answer to this simple problem. The issue at hand is that when I try to apply background images and other properties to the ...

cssreactjsmern

Once it hits the fourth tab, it must not cycle back to the first one

Hi there, I'm new to JavaScript I noticed that when I click the left and right arrows, the tabs circle back to the beginning However, I would like the circle to stop. When it reaches the fourth tab, it should not go back to the first. This should also ...

javascriptjqueryhtmlcss

What steps should I take to make the code in jsfiddle functional on my Visual Studio Code platform?

const canvasEle = document.getElementById('drawing-container'); const canvasPad = document.getElementById('pad'); const toolbar = document.getElementById('toolbar'); const context = canvasEle.getContext('2d'); const ...

javascripthtmlcsscanvasjsfiddle

How to achieve divs with see-through text using CSS?

How can I create a CSS (non-HTML5) based website with a filled div that has a cutout revealing an image underneath? There are various overlays and images involved, making the use of static images inconvenient. Additionally, I anticipate needing to scale th ...

csshtmlmasking

I'm curious about something I noticed in an HTML example within the text content section of elements. Can you help clarify this for me?

I recently came across a repository that was part of a bootcamp curriculum for learning full stack development. In one of the lessons on jQuery, students were tasked with building a calculator. However, I noticed some strange variables in the HTML where te ...

javascripthtmljquerycss

Distinction between style and styleClass on a JSF webpage

I recently began navigating a java code base that utilizes the style and styleClass keywords to customize elements within the jsf page. This particular project is built on jsf 2.2. The 'style' keyword is used for applying html attributes like: ...

htmlcssjsf-2

Is there a way to style the nav-item element specifically on the current page I'm viewing?

I'm just starting out with Vue.js and Nuxt and I need some guidance on how to apply a background image (blue line at the top of items) only to my active page (such as the contact page). https://i.sstatic.net/maDzc.png This is the HTML code I am usin ...

htmlcssvue.jsnuxt.jsbootstrap-vue

Rearranging anchor tag order with the power of JQuery

Imagine I have five anchor tags <a id = "A" class = "Home">Home</a> <a id = "B" class = "Maps">Maps</a> <a id = "C" class = "Plans">Plans</a> <a id = "D" class = "Community">Community</a> <a id = "E" clas ...

javascriptjqueryhtmlcss

the php renderer fails to take into account the styles

Trying to convey this as clearly as possible. I have the variables below: $name = main channel and $childs = sub channels. When I remove the childs from the HTML, only the main channel shows up - which is expected. However, when attempting to style the su ...

phphtmlcss

What happens when there is a 1-second delay in loading CSS on an HTML page?

Lately, I've been working on creating HTML and CSS pages. However, whenever I load a page, I notice that there's always a brief half-second flash of the HTML content without any styling applied. Does anyone have an idea why this is happening and ...

htmlcss

Implementing a Jquery check based on a checkbox

Hey, I'm having an issue with a condition. When I uncheck the checkbox, it doesn't uncheck. I've tried to make a block display, but the JavaScript isn't working. I attempted to add: document.getElementById("Reload").style.display = "b ...

javascriptjqueryhtmlcssbootstrap-4

Positioning a div absolutely within a targeted div

Is there a way to set a div as absolute within a specific relative div rather than just the parent? For instance, I have a div that's nested inside of a row. However, I would like it to be positioned absolutely in the section instead of the row. Both ...

htmlcsscss-position

What is the best way to extend the final column of a table across the entire width?

Here's the code I'm working with: .frm-find-people table td:nth-child(1) { padding: 5px 15px; width: 100px } .frm-find-people table td:nth-child(2) { border: 1px solid red; } <form class="frm-find-people"> <table> ...

htmlcss

Tips on customizing default Polymer CSS

Currently, the core-toolbar features an indent class that shifts the title to the right by 60px. However, material design guidelines suggest that the margin should actually be 80px (oddly enough, the number 60 is not mentioned in the documentation). I cou ...

csspolymerweb-componentshadow-dom

Leveraging sessions within the CSS Declaration

Struggling to pass the css file name to my razor page through session. Here's what I've got: Current line of code: <link href="@Url.Content("~/Content/epp.css")" rel="stylesheet" type="text/css" /> Trying to pass 'epp' as a Ses ...

c#cssasp.net-mvcrazor

Ensuring divs are centered when resizing the page

Is there a way to center an unordered list of tables while ensuring that it remains centered even when the window is resized? The list should move each table to a new line if they can no longer fit. Check out the code snippet below for reference: <d ...

htmlcss