<img>和<span>裏面<a>，只有跨度作爲鏈接

我有一個菜單，圖標（img）和文本在下面（span）。我希望他們都是可點擊的鏈接。我有這樣的HTML菜單的每一個項目：<img>和<span>裏面<a>，只有跨度作爲鏈接

<div class="menu_item"> 
    <a href="menu/viewTemplates.html"> 
     <img class="menu_icon" src="images/icons/template.png" alt="Templates"/> 
     <span>Templates</span> 
    </a> 
</div>

當我點擊img，什麼都不會發生，但是當我點擊span，鏈接工作正常。這發生在Chrome和Firefox中。到處都是我讀過的，除IE之外，人們似乎都沒有問題，但這不是我的情況。請問，關於什麼可能使這不起作用的任何想法？

我試了一下這個樣子，和它的作品：

<div class="menu_item"> 
    <a href="menu/downloadTemplates.html"> 
     <div class="menu_icon" id="lnkDownloadTemplates"></div> 
     <span>Download</span> 
    </a> 
</div>

但我還是想知道爲什麼其他的方式，也應該是正確的，是不是爲我工作。

CSS：

.menu_item{ 
    height: 15%; 
    width: 45%; 
    text-align: center; 
} 
.menu_icon{ 
    width:auto; 
    height:100%; 
}

來源

2017-08-04 Carmen Camacho

[not working]（https://jsfiddle.net/9fusum8p/）？那很奇怪，可以查看元素頁面？尋找綁定到圖像的JavaScript事件.. –

在Chrom和Firefox中爲我工作：https://codepen.io/anon/pen/yoVJxx –

@BagusTesa¿我如何尋找特定元素的事件？我正在研究webStorm，並且通過我的項目搜索了所有內容，並且我看不到其他地方，不在JS中，也不在HTML或CSS中傳遞該圖像。感謝您的評論:) –

嘗試使用顯示：塊;由於錨標籤默認爲內聯。你的HTML： -

<div class="menu_item"> 
     <a href="https://www.google.com"> 
      <img class="menu_icon" src="https://storage.googleapis.com/gweb-uniblog-publish-prod/static/blog/images/google-200x200.7714256da16f.png" alt="Templates"/> 
      <span>Templates</span> 
     </a> 
    </div>

你CSS-

.menu_item a { 
    display:block; 
} 
.menu_item{ 
    height: 15%; 
    width: 45%; 
    text-align: center; 
    } 
.menu_icon{ 
    width:auto; 
    height:100%; 
    }

來源

2017-08-04 04:16:12

我試過這個，但是它並沒有爲我解決：/。正如有些人已經告訴我的，我必須讓一些JS搞砸這個，但似乎無法找到它。謝謝！ –

.menu_item { 
 
    height: 15%; 
 
    width: 45%; 
 
    text-align: center; 
 
} 
 
.menu_item a { 
 
    text-decoration: none; 
 
} 
 
.menu_item a .menu_icon { 
 
    width: 20px; 
 
    height: 20px; 
 
    vertical-align: middle; 
 
}

<div class="menu_item"> 
 
    <a href="menu/viewTemplates.html"> 
 
     <img class="menu_icon" src="http://cl.jroo.me/z3/q/R/R/d/a.aaa-Unique-Nature-Beautiful-smal.jpg" alt="Templates"/> 
 
     <span>Templates</span> 
 
    </a> 
 
</div>

這是相同的，你正在尋找？

希望這會有所幫助。

來源

2017-08-04 06:17:53

我發現它與CSS或html u__u無關，但謝謝！ –

發現問題出在一個JS代碼中，它取得了我的元素的ID（當我發佈我的問題時沒有包含ID）並覆蓋了鏈接。

來源

2017-08-04 17:56:23

<img>和<span>裏面<a>，只有跨度作爲鏈接

回答

相關問題