html - 如何使用 <a> 和 <img> 标签使整个 <li> 处于悬停状态

Question

我有这个 HTML 和 CSS 列表结构:

.mylist-group{
	 padding-left: 0;
     margin-bottom: 20px;
      list-style:none;
	}
.mylist-group-item{
	
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid #ddd;
  height:134px;
	}

.mylist-group-item:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

	
.mylist-group-item  img{
float:right;
margin :5px 5px 5px 10px;
}

.mylist-group-item a{
float:right;
margin :50px 40px 0 0;
text-decoration: none;
 color: #555555;
 display:block;
}

<ul class="mylist-group">
	 <li class="mylist-group-item">
		 <img src="images/f6.jpg" class="img-rounded">
			<a href="#"> گالری کیک</a>
		 </li>
	 <li class="mylist-group-item">
		<img src="images/f6.jpg" class="img-rounded">
		  <a href="#"> گالری کیک</a>
	 </li>
	  <li class="mylist-group-item">
		  <img src="images/f6.jpg" class="img-rounded">
		   <a href="#"> گالری کیک</a>
	 </li>
</ul>

问题是，如果我将光标移动到 <li>是的，链接仍未激活，我必须将光标移到确切的链接上。

如果我将光标移动到 li 标签上，我想获得一个事件链接，我该怎么做？

Answer 1

一个选项是用具有所需高度/填充/等的 a 元素包装每个列表项的内容。

但是在不改变标记的情况下，仍然可以(以某种方式)扩大可点击区域。

我们可以将 a 元素显示作为 block ，并为它们提供overflow: hidden，以免重叠 float 。

然后为它们添加适当的padding/line-height(用于垂直对齐)以达到目的，如下:

.mylist-group{
  padding-left: 0;
  margin-bottom: 20px;
  list-style:none;
}

.mylist-group-item {
  position: relative;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid #ddd;
  height:134px;
}

.mylist-group-item:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.list-group-item:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}


.mylist-group-item  img{
  float:right;
  margin :5px 5px 5px 10px;
}

.mylist-group-item a{
  overflow: hidden;
  text-decoration: none;
  color: #555555;
  display: block;
  line-height: 16px;
  padding: 59px 0;
  text-align: right;
}

<ul class="mylist-group">
  <li class="mylist-group-item">
    <img src="images/f6.jpg" class="img-rounded">
    <a href="#"> گالری کیک</a>
  </li>
  <li class="mylist-group-item">
    <img src="images/f6.jpg" class="img-rounded">
    <a href="#"> گالری کیک</a>
  </li>
  <li class="mylist-group-item">
    <img src="images/f6.jpg" class="img-rounded">
    <a href="#"> گالری کیک</a>
  </li>
</ul>