CSS 悬停过渡不适用于实时链接

Question

基本上我试图在链接悬停时使用 css 转换。问题是，一旦链接生效（例如，将 href="#" 更改为 href="yahoo.com"），过渡不仅会停止工作，而且不会打开链接，而是会添加链接目的地到我的主页地址的末尾，如下所示：“driveandambition.com/yahoo.com”，这当然不起作用。到底发生了什么？我几个小时以来一直在拔头发，试图把这个鼻屎找出来。对我来说，为什么它不起作用或者为什么将目的地添加到地址末尾毫无意义。

我已经包含了 sidebar.php 中的 css 和 php/html 代码，这是它在社交媒体区域中发生的主要位置。我只包含了 sidebar.php 代码，但是一旦它们成为现实，过渡就不会在任何地方的任何链接上工作。当它不真实时，转换就会起作用。我希望我在提问时遵循了协议:(感谢您的帮助，您可以挽救生命。

网站在这里找到driveandambition.com ...它仍在建设中。

<?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 {
            font-family: 'BigNoodleTitlingRegular';
            src: url('http://www.driveandambition.com/wp-content/themes/DAPG/big_noodle_titling-webfont.eot');
            src: url('http://www.driveandambition.com/wp-content/themes/DAPG/big_noodle_titling-webfont.eot?#iefix') format('embedded-opentype'),
        url('http://www.driveandambition.com/wp-content/themes/DAPG/big_noodle_titling-webfont.woff') format('woff'),
        url('http://www.driveandambition.com/wp-content/themes/DAPG/big_noodle_titling-webfont.ttf') format('truetype'),
        url('http://www.driveandambition.com/wp-content/themes/DAPG/big_noodle_titling-webfont.svg#BigNoodleTitlingRegular') format('svg');
            font-weight: normal;
            font-style: normal;

    }

    @font-face {
            font-family: 'BigNoodleTitlingOblique';
            src: url('http://www.driveandambition.com/wp-content/themes/DAPG/big_noodle_titling_oblique-webfont.eot');
            src: url('http://www.driveandambition.com/wp-content/themes/DAPG/big_noodle_titling_oblique-webfont.eot?#iefix') format('embedded-opentype'),
        url('http://www.driveandambition.com/wp-content/themes/DAPG/big_noodle_titling_oblique-webfont.woff') format('woff'),
        url('http://www.driveandambition.com/wp-content/themes/DAPG/big_noodle_titling_oblique-webfont.ttf') format('truetype'),
        url('http://www.driveandambition.com/wp-content/themes/DAPG/big_noodle_titling_oblique-webfont.svg#BigNoodleTitlingOblique') format('svg');
            font-weight: normal;
            font-style: normal;

    }

    @font-face {
        font-family: 'BastardusSansRegular';
        src: url('http://www.driveandambition.com/wp-content/themes/DAPG/bastardussans-webfont.eot');
        src: url('http://www.driveandambition.com/wp-content/themes/DAPG/bastardussans-webfont.eot?#iefix') format('embedded-opentype'),
    url('http://www.driveandambition.com/wp-content/themes/DAPG/bastardussans-webfont.woff') format('woff'),
    url('http://www.driveandambition.com/wp-content/themes/DAPG/bastardussans-webfont.ttf') format('truetype'),
    url('http://www.driveandambition.com/wp-content/themes/DAPG/bastardussans-webfont.svg#BastardusSansRegular') format('svg');
        font-weight: normal;
        font-style: normal;

    }

    a:link,input[type="submit"],input[type="button"] {
        cursor: pointer;
    }

    a   {
        text-decoration: none;  
    }

    img {
        outline: none;  
    }

    /*html  {
        background: url(http://www.driveandambition.com/wp-content/uploads/2012/02/IMG_3047.png) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }*/

    body    {
        padding: 0px;
        margin: 0px;
        min-height: 100%;
        font-family: 'BastardusSansRegular', "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    }

    .clear  {
        clear: both;        
    }

    #header {
        display: none;
        visibility: hidden;
    }

    #header h1  {
        visibility: hidden;
    }

    #wrap {
        padding-top: 15px;
        padding-left: 20px;
        padding-bottom: 35px;
    }

    #container {
        /*background-color: #F06;*/
        width: 100%;
        min-height: 650px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

    #menu {
        background-color: #fff;
        float: left;
        min-height: 628px;
        width: 225px;
        padding-top: 15px;
        /*padding-bottom: 25px;*/
        font-size: 13px;
        margin-right: 35px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

    #m-logo {
        margin-right: auto;
        margin-bottom: 15px;
        margin-left: auto;
        width: 200px;
        min-height: 227px;  
    }

    #menu hr    {
        margin-top: 25px;
        margin-right: auto;
        margin-bottom: 20px;
        margin-left: auto;
        width: 185px;
        border-top-width: 1px;
        border-right-style: none;
        border-bottom-style: none;
        border-left-style: none;
        border-top-color: #444;
        border-right-width: 0px;
        border-bottom-width: 0px;
        border-left-width: 0px;
        border-top-style: dashed;
    }

    #nav    {
        font-family: 'BigNoodleTitlingRegular', sans-serif;
        font-size: 32px;
        min-height: 158px;
        width: 200px;
        margin-right: auto;
        margin-left: auto;
        /*background-color:#C69;*/
    }

    #nav ul {
        margin-bottom: 25px;
        margin-left: 30px;
        /*background-color: #9F9;*/
    }

    #nav-list li    {
        list-style-position: inside;
        list-style-type: none;
    }

    #nav-list li a  {
        color: #555;
    }

    #nav-list li a:hover    {
        color: #000;
        cursor: pointer;
        -webkit-transition: color 0.7s ease-out;
        -moz-transition: color 0.7s ease-out;
    }

    #m-end  {
        width: 173px;
        min-height: 155px;
        /*background-color: #333;*/
        margin-right: auto;
        margin-left: auto;
        font-size: 11px;
    }

    #social {
        margin-bottom: 15px;
        min-width: 170px;
        font-family: 'BigNoodleTitlingRegular', sans-serif;
        line-height: 18px;
        font-size: 17px;
        /*background-color: #993;*/
        min-height: 25px;
        margin-right: auto;
        margin-left: auto;
    }

    #social a   {
        color: #000;
        display: block;
        height: 20px;
        width: 65px;
        float: left;
        padding: 5px;
    }

    #social a:hover {
        color: #fff;
        background-color: #000;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-transition: color 0.7s ease-out;
        -moz-transition: color 0.7s ease-out;
     }

    .soc-left   {
        margin-right: 7px;  
    }

    #m-search   {
        width: 170px;
        height: 30px;
        /*background-color: #000;*/
        margin-right: auto;
        margin-left: auto;
    }

    #search {
        color: #999;

        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px; 
    }

    #menu p {
        margin-right: auto;
        margin-left: auto;  
    }

    #extra  {
        font-size: 10px;
        width: 170px;
        line-height: 18px;
        font-family: 'BastardusSansRegular';
        margin-right: auto;
        margin-left: auto;
        font-style: italic;
    }

    #extra a    {
        color: #555;
    }

    #extra a:hover  {
        color: #F00;
    }


    #content    {
        /*background-color:#CF0;*/
        margin-left: 260px; 
    }

    /*//////// Blog //////////*/

    .p-box  {
        background-color: #fff;
        height: 260px;
        width: 280px;
        float: left;
        padding: 25px 20px 20px 20px;
        margin: 0 15px 15px 0;

        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

    .details    {
        height: 20px;
    }

    .p-date {
        float:left;
        font-family: 'BigNoodleTitlingRegular', sans-serif;
        font-size: 15px;
        letter-spacing: 1px;
        color: #df1f26;
    }

    .p-spacer   {
        float:left;
        font-family: 'BigNoodleTitlingRegular', sans-serif;
        margin: 0px 5px 0px 3px;
        font-weight: bold;
        font-size: 12px;
        line-height: 18px;
    }

    .p-cat  {
        float:left;
        font-family: 'BigNoodleTitlingRegular', sans-serif;
        letter-spacing: 1px;
    }

    .p-cat a    {
        color: #777;    
    }

    .p-cat a:hover  {
        color: #000;    
    }

    .p-title    {
        font-family: 'BigNoodleTitlingRegular', sans-serif;
        letter-spacing: 1px;
    }

    .p-title h2 {
        font-size: 20px;
        font-weight: normal;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 5px;
        margin-left: 0px;
    }

    .p-title h2 a {
        color: #000;
    }

    .p-title h2 a:hover {
        color: #777; 
    }

    .image  {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        overflow: hidden;
    }

    .image  img {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px; 
    }

    .img iframe {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px; 
    }

    /*//////// single //////////*/

    #p-page {
        width: 760px;
        min-height: 618px;
        background-color: #fff;
        padding: 30px 20px 20px 20px;

        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

    #post p {
        line-height: 20px;
        letter-spacing: 1px;
    }

    #post a {
        color: #f00;
    }

    #post a:hover   {
        color: #777;
        -webkit-transition: color 0.7s ease-out;
        -moz-transition: color 0.7s ease-out; 
    }

    #p-meta {
        background-color: #9C0;
        width: 200px;
        height: 25px;   
    }

    #edit   {
        font-family: 'BigNoodleTitlingRegular', sans-serif;
        font-size: 18px;

    }

    #edit a {
        color: #777;
    }

    #edit a:hover   {
        color: #000;

    }

    /*//////// Page //////////*/

    .p-comments {
        font-family: 'BigNoodleTitlingRegular', sans-serif;
    }

    .p-comments a   {
        color: #777;
    }

    .p-comments a:hover {
        color: #000;
    }

    #page-title {
        font-family: 'BigNoodleTitlingRegular', sans-serif; 
    }

    #page-title h1  {
        font-size: 20px;
        font-weight: normal;
        margin: 0px;    
    }

    #p-bod  {
        min-height: 350px;
        width: 760px;
        background-color: #fff;
        margin-top: 15px;
        margin-bottom: 25px;
    }

    #post img   {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }

    .image iframe   {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px; 
    }

Answer 1

添加 http://www。任何外部链接，否则它们被视为相对链接。

澄清一下，

绝对链接 - 专门指向网页的链接；例如 http://www.yahoo.com
相对链接 - 转到相对于当前页面的页面的链接；例如 news.html

您要求提供指向 yoursite.com/yahoo.com 的链接，但该文件夹中没有名为 yahoo.com 的页面，所以有点恶心。

要在文件夹内导航，例如，如果您有索引页，然后单独归档图像（出于组织目的，您应该如此），您可以使用“/images/theimage.png”的相对链接链接到它们，您可以使用此清理网站 CSS 中文件的所有绝对链接。