Question

我制作了一个菜单，其中包含一些图片，我希望它们是一个链接，但我所能做的只是将文本作为链接！文本位于图片的顶部，所以当我鼠标悬停在图片中时，它不像链接..链接只在我将鼠标放在图片顶部的文本上时才会出现.. 我想将所有图片作为链接，而不仅仅是文本，我猜我把错误放在了错误的地方无论如何，这是代码

<link rel="stylesheet" href="mbcsmbur9s.css" type="text/css" />


<ul id="mbur9sebul_table" class="mbur9sebul_menulist css_menu" style="width: 931px; height:  165px;">
  <li class="topitem spaced_li"><div class="buttonbg gradient_button gradient165"><div class="icon_1"><a href="https://www.facebook.com/RealMadrid?fref=ts">Facebook</a></div></div></li>
  <li class="topitem spaced_li"><div class="buttonbg gradient_button gradient165"><div class="icon_2"><a>Twitter</a></div></div></li>
  <li class="topitem spaced_li"><div class="buttonbg gradient_button gradient165"><div class="icon_3"><a>Google +</a></div></div></li>
  <li class="topitem spaced_li"><div class="buttonbg gradient_button gradient165"><div class="icon_4"><a>Youtube</a></div></div></li>
  <li class="topitem spaced_li"><div class="buttonbg gradient_button gradient165"><div class="icon_5"><a>Android</a></div></div></li>
  <li class="topitem"><div class="buttonbg gradient_button gradient165" style="width: 184px;"> <div class="icon_6"><a>iOS</a></div></div></li>
</ul>
<!-- Menus will work without this javascript file. It is used only for extra
     effects, improved usability and compatibility with very old web browsers. -->
<script type="text/javascript" src="mbjsmbur9s.js"></script>

Answer 1

您需要将图像包含在a-tag中。并添加href属性，如：

<a href='#'><img src='your-image.png' />Twitter</a>

编辑：由于以下对话：<a href='#' class='icon_3'>Twitter</a＆gt;在CSS中，它必须如下所示：

.icon_3 {
  display: block;
  background-image: url('ebab_mbur9s_ico_2.png'); 
  background-repeat: no-repeat; 
  background-position: center 28px; 
  height: 100%; 
}

有必要使用display: block;，因为锚点基本上是内联元素。使用所有图标类执行此操作。您可能需要编辑实际的背景位置。

Answer 2

尝试：

<li class="topitem spaced_li"><div class="buttonbg gradient_button gradient165"><a href="https://www.facebook.com/RealMadrid?fref=ts"><div class="icon_1"></div></a></div></li>

Answer 3

您可以为<a>

提供背景图片

例如：检查这个js小提琴

Js Fiddle

a {
    display:block;
    background:url('xxx.png') no-repeat;
    background-size: 25px 25px;
    padding:10px 10px 10px 35px;
    background-position: center left;
    text-decoration: none;
}

Answer 4

你会用“＆lt; a＆gt;”包围你的img （锚）标签。

<ul style='list-style:none'>
  <li><a href='#'><img style='position:relative; top:-15px; left:50px;' height='50px' width='50px' src="https://cdn4.iconfinder.com/data/icons/free-large-twitter-icons/512/Twitter_button.png"/>Twitter</a></li>
</ul>

如何将菜单文件中的图片作为链接？

4 个答案: