將鏈接轉換爲鏈接

我試圖將div轉換爲鏈接。下面的代碼在Firefox中正常工作，但在IE中，鼠標指針不會對鏈接做出反應。有沒有解決的辦法？謝謝。將鏈接轉換爲鏈接

<html> 
<head> 
<style type="text/css"> 
.test{ 
    width:100%; 
    height:100px; 
    background:#666666; 
} 
</style> 
</head> 

<body> 
<a href="http://www.google.com"> 
    <div class="test"> 
     kjlkjlkjkljl 
    </div> 
</a> 

</body> 
</html>

來源

2010-01-25 usertest

我認爲IE在這種情況下實際上正確響應。

A div是塊級元素;因此它不應包含在內聯元素中，例如a。如果您使用span（代替div），那麼在IE和Firefox中都可以工作嗎？

如果你想讓它看起來像一個鏈接（在光標而言），那麼你可能需要使用：

a > div, /* please change your mark-up to the following */ 
a > span {cursor: hand; /* for earlier versions of IE */ 
      cursor: pointer; /* for, I think, IE 7+ and FF etc. */ 
}

來源

2010-01-25 17:50:32

您可以使用遊標CSS屬性。 http://www.w3schools.com/CSS/pr_class_cursor.asp

但是，您的HTML是不正確的。你不能在<a>這樣的標籤內放置<div>。

來源

2010-01-25 17:50:00 jgallant

嘗試：

.test{ 
    width:100%; 
    height:100px; 
    background:#666666; 
    cursor: pointer; 
}

來源

2010-01-25 17:51:12

你爲什麼想用div作爲鏈接？

難道你不能只顯示你的鏈接爲塊？

a{ 
    display:block; 
}

或者使用span代替div。

來源

2010-01-25 17:51:49

由於Welbog指出的那樣，<a>和<div>元素，應調換：

<div class="test"> 
    <a href="http://www.google.com"> 
     Lorem ipsum 
    </a> 
</div>

然後在你的風格，你可以使<a>標籤擴展到填滿整個DIV：

.test a { 
    display: block; 
    width: 100%; 
    height: 100%; 
}

來源

2010-01-25 17:52:08 AaronSieb

這是BBC網站和衛報使用的最佳方式：

http://codepen.io/IschaGast/pen/Qjxpxo

繼承人的HTML

<div class="highlight block-link"> 
     <h2>I am an example header</h2> 
     <p><a href="pageone" class="block-link__overlay-link">This entire box</a> links somewhere, thanks to faux block links. I am some example text with a <a href="pagetwo">custom link</a> that sits within the block</p> 

</div>

繼承人的CSS

/** 
* Block Link 
* 
* A Faux block-level link. Used for when you need a block-level link with 
* clickable areas within it as directly nesting a tags breaks things. 
*/ 


.block-link { 
    position: relative; 
} 

.block-link a { 
    position: relative; 
    z-index: 1; 
} 

.block-link .block-link__overlay-link { 
    position: static; 
    &:before { 
     bottom: 0; 
     content: ""; 
     left: 0; 
     overflow: hidden; 
     position: absolute; 
     right: 0; 
     top: 0; 
     white-space: nowrap; 
     z-index: 0; 
    } 
    &:hover, 
    &:focus { 
     &:before { 
     background: rgba(255,255,0, .2); 
     } 
    } 
} 


.highlight { 
    background-color: #ddd; 
}

來源

2016-07-06 12:34:11 jojojohn

將鏈接轉換爲鏈接

回答

相關問題