Hover transitions in CSS are not functional on the active links

My issue involves using CSS transitions when hovering over links. When the links are live (meaning a href="#" is changed to a href="yahoo.com," for example), the transitions stop working and instead of opening the link, it appends the link destination to the end of my homepage address like this: "driveandambition.com/yahoo.com", which obviously doesn't function properly. I'm completely baffled by what's happening. I've spent hours trying to troubleshoot this strange behavior with no luck. It makes no sense why the transitions cease to work or why the destination is being added to the homepage URL.

The problem primarily occurs in the social media area of sidebar.php, where the issue persists even after including relevant CSS and PHP/HTML code. The transitions fail to work on any other links once they become active. Prior to becoming active, the transitions function correctly. I hope I have followed proper protocol in asking questions. Thank you in advance for your assistance - it may save me from pulling out all my hair!

You can find the site here: driveandambition.com. Please note that it is still under construction.

<?php
    /**
     * @package WordPress
     * @subpackage Drive and Ambition
     */
    ?>
                <div id="menu">
                    <div id="m-logo"><a href="/" title="Home"><img src="http://www.driveandambition.com/wp-content/uploads/2012/02/dna-logo.png" width="200" height="227" alt="Drive &amp; Ambition" /></a></div>
                    <hr />
                    <div id="nav">
                        <ul id="nav-list">
                <li><a href="#" title="About">About</a></li>
                            <li><a href="#" title="Blog">Blog</a></li>
                            <li><a href="#" title="Shop">Shop D&amp;A</a></li>
                            <li><a href="#" title="Contact">Contact</a></li>
                        </ul>
                    </div>
                    <hr />
                    <div id="m-end">
                        <div id="social">
                            <a href="#" class="soc-left" title="D&A on Twitter" target="_blank"><span><img src="http://www.driveandambition.com/wp-content/uploads/2012/02/twttr.png" width="18" height="16" alt="D&amp;A Twitter" />Twitter</span></a>

                <a href="http://www.facebook.com/DriveAndAmbitionVA" title="D&A on Facebook" target="_blank"><img src="http://www.driveandambition.com/wp-content/uploads/2012/02/fcebk.png" width="8" height="16" alt="D&amp;A Facebook" />Facebook</a>

                <a class="soc-left" href="http://vimeo.com/driveandambition" title="D&amp;A on Vimeo" target="_blank"><img src="http://www.driveandambition.com/wp-content/uploads/2012/02/vimeo.png" width="16" height="16" alt="D&amp;A Vimeo" />Vimeo</a>

                <a href="http://driveandambition.tumblr.com/" title="D&amp;A on Tumblr" target="_blank"><img src="http://www.driveandambition.com/wp-content/uploads/2012/02/tmblr.png" width="16" height="16" alt="D&amp;A Tumblr" />Tumblr</a>
                            <div class="clear"></div>
                        </div>
                        <div id="m-search"><input name="Search" type="text" id="search" value="search" size="28" maxlength="140" /></div>
                        <p id="extra">&copy;2012 DRIVE &amp; AMBITION 
                        Site:<a href="http://rawinn.tumblr.com/" target="_blank">FTWinn</a></p>
                    </div><!--end m-end-->
                </div><!--end menu-->

    /*
    Theme Name: Drive and Ambition
    Theme URI: http://www.driveandambition.com
    Description: A clean and minimal theme that is compatible with WordPress 3.0
    Author: W.A.T.T.S.
    Author URI: http://rawinn.tumblr.com
    Version: 1.0
    */

    @charset "UTF-8";

    @font-face {
    ...

Answer №1

Make sure to include before any external links, otherwise they will be treated as relative links.

Just to clarify,

Absolute links - these directly point to a webpage; for example, http://www.google.com Relative links - these lead to a page relevant to the current one; such as news.html

If you want a link to direct to yoursite.com/yahoo.com and there isn't actually a yahoo.com page within that directory, it won't work properly.

To navigate through folders, say if you have an index page and images stored separately (which is good for organization), you can use a relative link like '/images/theimage.png' This method can help tidy up all absolute links to files in your website's css.

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

Displaying all items in the flexbox in a single row by decreasing the width of each individual box

After some tweaking, I now have a lineup of boxes styled like this: Check out the code in action on Codepen. Unfortunately, StackOverflow doesn't display it accurately. This is the CSS I implemented: @font-face { font-family: "Heebo-Light"; src: ...

What is the process for embedding images and text within a nested division element?

I have a website layout with 4 main sections: header, left side, right side, and footer. I would like to further divide the header into two sections - left header and right header. The right header should contain an image along with other options like home ...

How to prevent text from extending beyond the maximum width limit set in HTML

I defined a max-width of 500px for the div element, but the text inside is overflowing the width instead of wrapping to the next line. Can someone please assist with which code needs to be modified? Here is the code snippet in question: The div is set t ...

The select box in CSS is optimized for Chrome but poorly displayed in Firefox

Struggling with styling the select box for both webkit and moz browsers. It looks great in Chrome, but terrible in Firefox - the default option is not vertically aligned with the select box. Can someone help me pinpoint the issue in this code? CSS: sele ...

Pictures displayed in a bootstrap carousel are not completely filling up the entire carousel space

I recently started working with Ruby and decided to use the refile Gem for uploading multiple photos. I wanted to showcase the photos in a Carousel format using Bootstrap carousel. However, when I display the photos, they don't fill the carousel windo ...

Tips for incorporating the <li> element into a versatile layout

My dilemma involves a div containing multiple ul and li elements that are struggling to fill the available space effectively. The issue arises when there is either excess space on the right side or one of the uls gets displaced below the others due to vary ...

Utilizing asset URLs in style binding with Vite: A comprehensive guide

Is anyone else experiencing issues with displaying a background image from the assets folder? I am currently using an image tag and it appears properly, but when I attempt to use the background-image style, I receive a 404 error. I am utilizing Vue 3 with ...

How can I eliminate the error message "WARNING: no homepage content found in homepage.md"?

Starting my journey with KSS utilizing Keith Grant's CSS in Depth as a guide. In section 10.1.4, the author suggests: To begin, create a new markdown file named homepage.md inside the css directory. This file will serve as an introduction to the patt ...

Issue with border radius not applied to input-group in Bootstrap 3

Can anyone explain why the input-group in Bootstrap 3.4 is missing all border radius? <form action="{{ route('dashboard.users.index') }}" method="get"> <div class="input-group"> <input type="text" name="search" class="f ...

CSS/HTML: A guide to creating an element that switches to absolute positioning when scrolled past

Just starting out with CSS and HTML here, trying to figure out how to make an element become absolutely positioned once you scroll past it on the page. Take a look at this example for reference: (no need for an account to test). As you scroll down, the b ...

The elements from base.html and the extended page are now placed on separate rows rather than on the same row

I'm relatively new to HTML, Jinja, and CSS and have been playing around with creating a webpage that retrieves data from a sqlite3 database. As of now, I am facing some challenges regarding formatting. To assist with table formatting and overall aest ...

Upon reaching a specific milestone on the page, automatically scroll to the designated anchor point

Here's the deal: I plan to showcase 4 divs on my page. Each div will have a specific height (around 1500px) but will span the full width of the screen. To add some flair, each div will be a different color. My goal is for JavaScript to kick in once ...

What is the best way to transform all elements on a webpage into a dynamic scrolling marquee?

Is there a way to make every div in a web application scroll like a marquee? Perhaps by using a specific CSS class or other method? The application is built with Angular 4 and Bootstrap. ...

Changing user roles in Woocommerce upon purchase

I have implemented this code snippet to upgrade my users' roles from 'Subscriber' to 'Premium' when they purchase a specific product from my store. add_action( 'woocommerce_order_status_completed','change_role_on_pu ...

Creating a slender arrow placed inside a circular div using CSS

I'm currently working on designing a slim right-facing arrow using CSS. So far, I've successfully created the circular div, but I'm struggling with creating the arrow itself. <div class="circleBase type2"></div> I've set ...

CSS3 animations: the speed of transitioning between animations is sluggish

The slider I created has animations that are taking too long to transition between slides. I have tried adjusting the properties, but I can't seem to find the right one to control the speed of the transitions. /* Keyframes */ @-webkit-keyframes anim ...

Fading Out with JQuery

My page contains about 30 same-sized divs with different classes, such as: .mosaic-block, .events, .exhibitions, .gallery, .sponsors, .hospitality, .workshops, .lectures { background:rgba(0, 0, 0, .30); float:left; position:relative; overf ...

What's the best way to eliminate letter-spacing only for the final letter of an element using CSS?

Displayed above is the image in question from my HTML page. The text menu is contained within a right-aligned div, with a letter spacing of 1.2em. Is there a way to target this specific element with a pseudo-selector? I'd prefer not to use relative po ...

Drop-down menu for every individual cell within the tabular data

I'm working with a large HTML table that looks like this: <table> <tr> <td>value1</td> <td>value2</td> </tr> <tr> <td>value3</td> <td>value4 ...

Styling elements using the nth-child selector in JavaScript

I am trying to apply a CSS class based on the combined height of the 2nd and 3rd child elements. For example, if the height of the 2nd child plus the height of the 3rd child equals a certain value, I want to add a specific class. Here is my JavaScript cod ...