Html 如何在将鼠标悬停在节中的span标记上时显示div框？

我试图弄清楚如何悬停在一个span标记上，然后打开一个定制的div框？现在，我将span标记归为title，它将自动悬停并解释它是什么，但我不想要浏览器使用的默认值，而是希望能够使用我自己的div“define_box”，当悬停在span标记上时，我构造该div“define_box”来显示。我该怎么做

我的完整代码如下：

我的CSS代码的重点是：

#message > span:hover{

}
.define_box{ /*a definition box appears when hovered*/
height:100px;
width:500px;
background-color:#000;
color:#FFFE41;
font-weight:bold;
border: 1px solid #FFFE41;
/*z-index:-14;*/
display:none; /*hide the element until hovered*/
}

HTML:

照相手机

            <p id="message">The first camera phone known as the J-Phone was sold in 2000 in Japan. The first generations of camera phones used 
            <span style="cursor:help;text-decoration:underline;" title="Charge Coupled Device is a light-sensitive integrated circuit that stores and displays the data for an image in such a way that each pixel (picture element) in the image is converted into an electrical charge the intensity of which is related to a color in the color spectrum. (techtarget)">Charge Coupled Device (CCD)</span>. Today, about 90% of 
            camera phones use <span style="cursor:help;text-decoration:underline;" title="Complementary metal-oxide-semiconductor is the semiconductor technology used in transistors. In a complementary way, it forms an effective means of electrical control. CMOS transistors uses less power when not needed. However, it does become hot when rapid direction changes are being used such as taking a snapshot. (techtarget)">Complementarymetal-oxide-semiconductor (CMOS)</span> 
            image sensor technology that improves somewhat over CCD by using way less power enhancing battery life, 
            less expensive to produce, but slightly lower in quality and resolution than CCDs. In 1997, Philippe Kahn pictures of his daughter&rsquo;s birth were
            the first known publicly shared pictures via a cell phone device to his families and friends. In 2003, more camera phones were being sold 
            worldwide than digital cameras. By 2006, more than half of mobile phones had a built-in camera. In 2010, the number of camera phones worldwide
            totaled to more than a billion. In 2012, Nokia announced the Nokia 808 PureView featuring 41-megapixel 1/1.2-inch sensor running Nokia&rsquo;s 
            Symbian OS. In 2013, the Nokia Lumia 1020, an improved version of the 41-megapixel sensor sports a 2/2-inch sensor, running Windows Phone 8, 
            achieved higher definition and light sensitivity.</p>

            <div class="define_box">
                Charge Coupled Device is a light-sensitive integrated circuit that stores and displays the data for an image in such a way that each pixel (picture element) in the image is converted into an electrical charge the intensity of which is related to a color in the color spectrum. (techtarget)
            </div>

            <div class="define_box">
                Complementary metal-oxide-semiconductor is the semiconductor technology used in transistors. In a complementary way, it forms an effective means of electrical control. CMOS transistors uses less power when not needed. However, it does become hot when rapid direction changes are being used such as taking a snapshot. (techtarget)
            </div>

            <!--<p id="message2"></p>-->
        </section> 

第一款被称为J-phone的照相手机于2000年在日本销售。使用的第一代照相手机
电荷耦合器件（CCD）。今天，大约90%的
照相手机使用金属氧化物半导体（CMOS）
图像传感器技术通过使用低功耗提高电池寿命，在一定程度上优于CCD，
生产成本较低，但质量和分辨率略低于CCD。1997年，Philippe Kahn拍摄了他女儿的照片；她的出生是
第一个已知的通过手机设备公开分享照片给他的家人和朋友。2003年，更多的照相手机被出售
在世界范围内，数码相机还远远不够。到2006年，超过一半的手机都有内置摄像头。2010年，全球照相手机的数量
总数超过10亿。2012年，诺基亚发布了诺基亚808 PureView，其具有运行诺基亚的4100万像素1/1.2英寸传感器；s
塞班操作系统。2013年，诺基亚Lumia 1020是4100万像素传感器的改进版，采用2/2英寸传感器，运行Windows Phone 8，
实现了更高的清晰度和光灵敏度
电荷耦合器件是一种光敏集成电路，它以这样的方式存储和显示图像的数据，即图像中的每个像素（像素）被转换为电荷，其强度与色谱中的颜色有关。（techtarget）
互补金属氧化物半导体是晶体管中使用的半导体技术。以一种互补的方式，它形成了一种有效的电气控制手段。CMOS晶体管在不需要时使用更少的功率。但是，当使用快速方向更改（如拍摄快照）时，它确实会变热。（techtarget）

如果重新构造HTML，使定义

div

s紧跟在目标

span

s之后，则可以使用CSS下一个同级选择器

+

，在

span

悬停时显示

div

新HTML：

Bla Bla Bla <span class="hard-word">Charge Coupled Device (CCD)</span><div class="definition">They are Bla Bla Bla</div> Bla Bla Bla<span class="hard-word">Another Term</span><div class="definition">They are Blip Blip Blip</div>

---

这就是你要找的吗？对于您试图实现的目标，它只是为了使用CSS3而推动它。不是不可能，但你的结构将变得非常混乱。尝试使用jQuery。@YuriyGalanter是的，这正是我想要的。我试过这样做，#message>span:hover+div，但div不在p标记中。那么，如何从p标记中退出并选择div呢？要使这种方法起作用，您必须将div放在跨距之后。如果这种方法不适合您，您将不得不使用JS和onmouseover事件

.definition{
    display: none;
    position: absolute;
    /* other styles */
}
.hard-word:hover + .definition{
    display: block;
}