光标:指针不适用于带有图像的 div

Question

我想在将鼠标悬停在div 上时将光标更改为指针，但是我的代码不起作用，我不知道如何修复它。

.HTML：

<a href="try.html"><div id="kyoto" style="height:160px; width:1000px;" class="box">
<li><img id="kyoto_pic" src="kyoto_pic.jpg" alt="Kyoto" height="158" width="340">
<p id="kyoto_description"><span class="title"><strong>Kyoto </strong></span> <span class="description"> - The fascinating city of history and culture.&nbsp&nbsp</span><a class="top_destinations_link" href="try.html">Read >></p>
</li>
</div></a>

.CSS：

#kyoto{
margin-top: 10px;
cursor: pointer;
}

提前感谢您的帮助。

Answer 1

您的代码运行良好，请看这里：

#kyoto{
margin-top: 10px;
cursor: pointer;
background-color: yellow;
}

<a href="try.html">
<div id="kyoto" style="height:160px; width:1000px;" class="box">
<li>
<img id="kyoto_pic" src="kyoto_pic.jpg" alt="Kyoto" height="158" width="340">
<p id="kyoto_description"><span class="title"><strong>Kyoto </strong></span> <span class="description"> - The fascinating city of history and culture.&nbsp&nbsp</span><a class="top_destinations_link" href="try.html">Read >></p>
</li>
</div>
</a>

Answer 2

你的代码对我有用。我的意思是，当我悬停图像时，光标具有指针方面。除非我不明白你的问题...(看我下面的代码笔，告诉我(

但。。。

我为您的问题创建了一个代码笔，就在这里。如您所见，我添加了一些边框和背景，然后您可以看到您的代码并不完全干净，因为每个元素都在其父元素上溢出。

此外，您的代码并不真正有效。如果你想使用带有文本图例的图像，我建议你使用<figure>标签，它更合适。若要获取一些帮助，请按照此文档操作。