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

Can you provide a succinct explanation of what constitutes a well-defined "landing page"?

Could someone provide a clear and concise explanation of what exactly constitutes a landing page and how it should be utilized? I'm struggling to grasp the concept. Where is the optimal placement for a landing page on a website? Is it best placed o ...

javascriptphphtmlcsswordpress

Instructions on uploading a PDF file from a Wordpress page and ensuring the file is stored in the wp-content upload directory folder

What is the process for uploading a PDF file on a WordPress page? <form action="" method="POST"> <input type="file" name="file-upload" id="file-upload" /> <?php $attachment_id = media_handle_upload('file-upload', $post->I ...

javascriptphphtmlcsswordpress

What is the best way to rearrange Bootstrap columns for extra small screens?

In my bootstrap layout, I have a row with two columns: <div class="row"> <div class="col-md-5 col-md-push-7"> Content in this column should display on the right </div> <div class="col-md-7 col-md-pull-5"> ...

csstwitter-bootstraptwitter-bootstrap-3

What steps can I take to correct this CSS code? I am looking to update the content using CSS

Here is the code I have for the specific page shown in the screenshot: I want to change 'Replay course' to 'Access course'. Can anyone help me figure out what I'm missing? a.course-card__resume { display: none; } a.course-car ...

csscss-selectors

create a division in the organization of the identification numbers

Is there a way to always change pages when the id changes in a foreach loop to separate the printed pages? Take a look at this code snippet: var data = [ {Id: "552", valor: "50.00", Descricao: "Fraldas", }, {Id: "552", valor: "35.00", Descrica ...

javascripthtmlcss

Merging double borders in a div using CSS is essential for creating

Upon examining this sample, it's evident that the borders do not blend together. css: div{ float:left; background-color:moccasin; width:100px; height:100px; border:1px solid tomato; } The number of divs is arbitrary, and only on ...

javascriptjqueryhtmlcss

Unsuccessful attempt at a basic CSS transition - no success

I'm currently trying to create an image with a gradient that disappears on hover, but I'm struggling to get the transition effect to work. I've experimented with various webkit transitions without success. Here's the HTML: <a href= ...

htmlcsshovercss-transitions

resizing videos in wordpress

Similar Question: How to Resize Embedded Videos Using PHP I am looking to adjust the dimensions of videos to be 280 pixels in height and 520 pixels in width on my WordPress homepage. Currently, the code is using the original YouTube dimensions: ...

phphtmlcsswordpressvideo

Addressing see-through box styling in CSS

When working on a website using HTML and CSS, I encountered an issue with a transparent box. All elements within this box are also transparent, but I want them to be solid without any opacity. How can I resolve this? .parent { display: inline-block; ...

htmlcssdjangoopacity

SVG: organizing objects based on event priority

I am struggling with layering and event handling in an SVG element. Check out the example here: https://stackblitz.com/edit/angular-ivy-rkxuic?file=src/app/app.component.ts app.component.ts import { Component, VERSION } from '@angular/core'; @ ...

cssangularsvg

Display only a loading image with a see-through background after submitting the page

After submitting the page, I would like to display a loading image in the middle of the page with a transparent background. The current styling code I have used is as follows: #loading { position: fixed; top: 50%; left: 50%; z-index: 1104; ...

javascripthtmlcsscss-position

Utilizing Fullcalendar v5's sticky header feature alongside a Bootstrap fixed top navigation bar for a seamless

Currently experimenting with the latest version of fullcalendar 5.4.0. I have integrated the calendar into a bootstrap 4 web page that features a fixed navigation bar at the top. The issue arises when attempting to set stickyHeaderDates, aiming to keep th ...

htmlcsstwitter-bootstrapfullcalendarfullcalendar-5

Having trouble toggling the navbar on and off in mobile. Error message: Unable to read parentnode of undefined

When I try to make my mobile navbar full screen on a mobile device, the hamburger button works as expected when clicked. Initially, all the links are displayed in full page view, but once I click on a link, it disappears and takes me to the respective sect ...

javascripthtmlcss

CSS - selecting elements that are greater than a specific criteria N

I have multiple <p> tags in the body of my HTML. I want to display only the first two paragraphs and hide all the paragraphs that come after. However, the code I'm using doesn't seem to work as expected. <html> <head> < ...

htmlcsscss-selectors

Display user's name in navigation bar using asp.net mvc

When working on an ASP.NET MVC project, I wanted to include a short message for the user, such as 'Hello, username!' In the navigation bar, specifically when the user is signed in, I encountered some display issues with the standard bootstrap la ...

htmlcssasp.netasp.net-mvctwitter-bootstrap

Ways to conceal a child div element without using any specific ID reference

I encountered an issue where I need to conceal all divs within a parent div except the first one. The challenge is that these divs do not possess any unique identifiers. Is there a way to achieve this task using CSS or pure JavaScript? <div role="list ...

javascripthtmlcss

What is the best way to conduct automated tests on CSS rendering across various browsers, including Safari Mobile and the Android Browser?

Is there a way to programmatically and automatically test how CSS is rendered in various browsers, similar to how Selenium tests HTML and Javascript across different browsers? It would be great to integrate this with a BDD framework. ...

cssseleniumtestingbdd

Finding the "img" id using jQuery

Here is the code snippet I am working with: <div id="popupContactIMG_4179" class="xxxx"> <a id="popupContactCloseIMG_4179">x</a> <img alt="" src="../IMG_4179.jpg" id="id1&q ...

jqueryhtmlcssjquery-plugins

Table-styled div containing a horizontal scrolling div

I am currently in the process of developing a webpage with dual columns. The two columns are segregated into div containers, one labeled right and the other labeled left. These columns reside within a parent div called row, which is nested within a main di ...

csshtml

Styling nested divs in CSS

I am experiencing an issue where the child divs within parent divs are overflowing outside of the parent divs. To get a better understanding of the problem, please try running the code below in a browser: My goal is to align the innermost divs horizontall ...

javascripthtmlcss