CSS Set Graphics Not Clickable

爲什麼我不能點擊我的圖形？CSS Set Graphics Not Clickable

HTML：

<div class="column-right-social"> 

    <ul> 
     <li id="facebook"><a href="#"></a></li> 
     <li id="twitter"><a href="http://www.twitter.com/"></a></li> 
     <li id="mail"><a href="/contact-us"></a></li> 
    </ul> 

</div>

CSS：

.column-right-social ul{ 
    width:250px; 
    margin:0px; 
    padding:0px; 

} 

.column-right-social ul li{ 
    width:80px; 
    height:80px; 
    list-style-type:none; 
    float:left; 
} 

.column-right-social #facebook{ 
    background:url('../image/facebook.png') no-repeat; 

} 

.column-right-social #twitter{ 
    background:url('../image/twitter.png') no-repeat; 

} 

.column-right-social #mail{ 
    background:url('../image/mail.png') no-repeat; 

}

來源

2011-09-19 Jess McKenzie

你可以將其更改爲：

<div class="column-right-social"> 

<ul> 
    <li id="facebook"><a href="#"><img src="../image/facebook.png" /></a></li> 
    <li id="twitter"><a href="http://www.twitter.com/"><img src="../image/twitter.png" /></a></li> 
    <li id="mail"><a href="/contact-us"><img src="../image/mail.png" /></a></li> 
</ul>

來源

2011-09-19 21:08:23 isJustMe

我會嘗試加入：

div.column-right-social ul li a{ 
width: 100%; 
height: 100%; 
display: block; 
}

曬。

來源

2011-09-19 21:04:35

背景不可點擊。您的<a>標籤沒有內容，因此瀏覽器會將它們呈現爲0x0（又名不可見）區域。您還需要在<a>元素上放置一些高度/寬度。

來源

2011-09-19 21:04:45

因爲您的圖像被設置爲標籤的背景，而不是錨點。你的錨也沒有內容，所以它不是真的呈現任何點擊區域。

要麼一個onclick添加到您的標記，做同樣的你的錨，或更改標籤的大小，以填充整個

一些建議，從未有一個空的標籤。你想要的東西，尤其是國有企業。您可以隨時通過CSS隱藏：

<a class="test" href="#"><span>My Anhor</span></a>

CSS

.test 
{ 
    background:url('../image/twitter.png') no-repeat; 
    width:32px; 
    height:32px; 
    //set your image properties here and width/height 
} 

.test span 
{ 
    display:none; 
    //or move them WAYY off the screen, or font 0, etc. hide it. 
}

這樣屏幕閱讀器仍然會正確讀取你的錨爲CSS將被忽略。它會在瀏覽器中顯示。

來源

2011-09-19 21:05:30

如果要使它們可點擊，您必須定義a -elements元素的背景，而不是li -elements。

實施例：

.column-right-social #twitter a { 
    background: … 
    width: … 
    height: … 
}

無論如何，目前的做法是不好的，因爲還沒有加載的圖像還沒有瀏覽器（或無法顯示的圖像）將顯示「無」，而不是一個替代圖像的描述超鏈接的文本。

來源

2011-09-19 21:06:21 Rayne

CSS Set Graphics Not Clickable

回答

相關問題