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

标签 css wordpress hover transition

基本上，我试图在我的链接悬停时使用 css 转换。问题是，一旦链接生效(例如，意味着 href="#"更改为 href="yahoo.com")转换不仅停止工作，而且没有打开链接，而是添加了链接目的地到我的主页地址的末尾，例如:“driveandambition.com/yahoo.com”，这当然行不通。到底发生了什么？几个小时以来，我一直在努力拔掉这个鼻屎。对我来说，为什么它不起作用或为什么将目的地添加到地址末尾是没有意义的。

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

在此处找到的网站 driveandambition.com ...它仍在 build 中。

<?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; 
    }

最佳答案

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

澄清一下，

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

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

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

关于Css 悬停过渡不适用于实时链接，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9322515/

上一篇：css - Jquery-tools Scrollable 结合 Jquery UI sortable

下一篇：css - Safari 中的样式问题

相关文章：

php - 绘制锦标赛括号(基于 PHP 数据集的 CSS/HTML)

wordpress - 如何从类别和商店页面重定向到 WooCommerce 中的主页？

css - div 的不当行为

css - 使用灰度悬停效果，在 FF 或 IE 中无法正常工作

colors - Zurb基金会4 : How to change color of background of top-bar-section on hover?

css - 无法使用 CSS3 居中

css - 指定嵌套 Angular 2 组件的样式类

mysql - 将两个 MYSQL 查询列结果合并为一个以在 ORDER BY 中使用

jquery 鼠标悬停

javascript - jQuery - CSS - 函数 - 尝试更改当前标签的类

©2024 IT工具网  联系我们