Html 如何在CSS中悬停时显示隐藏内容

正如标题所说，我想在悬停图像时显示一个隐藏的跨度“框”，但我无法让它工作，所以我希望你们能找出我的错误

HTML

你可以在这里看到它现在是如何工作的，但没有那么好：/

这等于jQuery代码

 $(element).on('hover', function() { $(this).css("display", "block"); });

---

但是在css上悬停有时真的很麻烦…

首先需要安装jQuery（在源代码中查找jQuery.js/jQuery.min.js，或者在google上查找w3c jQuery安装）

在这之后你写下：

<script>
$(document).ready(function() {
// everything here is done once the page is loaded

// define hover event handler for a specific element
$(".the_hovered_element").on('hover', function() {
   // show the element 
   $(".the_element_to_be_shown").css("display","block");
});
});
</script>

$（文档）.ready（函数（）{
//加载页面后，此处的所有操作都将完成
//为特定元素定义悬停事件处理程序
$（“.the_hover_元素”）.on（'hover'，function（）{
//显示元素
$（“.the_element_to_be_display”）.css（“display”、“block”）；
});
});

---

不要忘记，必须首先将display:none设置为先隐藏后显示的div。也可以用简单的动画代替.css（“display”、“block”），比如.fadeIn（“slow”）

不相关，但你不应该将标题之类的块元素放在跨距之类的内联元素中。你不能用CSS选择DOM中更高的元素，因此除非你更改源代码顺序，否则你的选择永远不会起作用。我仍然是一名业余编码爱好者，但是很高兴知道：）你将如何设置它？取决于你的实际需求，但是-实际上很好，虽然框应该在图片的顶部，但我用一些边距固定了它（我真正知道如何做的唯一方法是：D），但它看起来像这样，这是可以的，但随后出现了一个新问题，每次你移动鼠标，它都会闪烁，你知道如何停止吗？元素\u哪个元素将\u悬停：悬停>元素\u影响{//style}。。。很简单，你可以给我举个例子，或者更改我链接到的JSFIDLE，很抱歉耽误了你的时间，但是以前从未尝试过这种代码，而且非常不知道该怎么做，尽管你说得很清楚：DThanks它工作得很好！虽然当你在要显示的元素上移动光标时，它会闪烁，而且每次你点击它时，它都会消失，你可能知道如何修复它？我认为这是浏览器的一个缺陷，在Chrome中是可以的。但是这个悬停是非常有限的，你也不能触发其他事件，这就是为什么你使用jQuery，如果你想要jQuery代码，我也可以写一个描述的答案……jQuery是你编写代码的基本工具。我建议您至少学习最基本的（我指的是最简单的处理程序和函数，而不是对象风格的编程和模式）。因为css基本上是用来设置颜色的，而javascript则是用来设置动画的颜色和其他：）希望你能理解我。虽然这是一个一次性的问题，但是作为一名优秀的开发人员，我不会这样做。很好，但是它是如何工作的，我是否将代码放入html、CSS中，或者甚至创建一个它引用的新文档？PS-我今天已经很久没上网了，如果我事后联系你可以吗？：）不幸的是，我并不总是有时间，所以让我们把它留在这里。您可以在html代码中编写它，最好在加载所有内容后在页脚中编写，或者如果它更长更复杂，只需在一个没有标记的示例.js文件中编写，然后在html中包含为script src=“”，好的，谢谢您的帮助！节省了我几个小时的研究；）

element:hover > other_element {
 display: block;
}

 $(element).on('hover', function() { $(this).css("display", "block"); });

<script>
$(document).ready(function() {
// everything here is done once the page is loaded

// define hover event handler for a specific element
$(".the_hovered_element").on('hover', function() {
   // show the element 
   $(".the_element_to_be_shown").css("display","block");
});
});
</script>