Question

我试图找出如何将鼠标悬停在span标记上，然后调出一个自定义的div框？现在，我有标题的span标记将自动悬停并解释它是什么，但我不想要一个浏览器使用的默认标签，而是我希望能够使用我自己的div“define_box”我构建为悬停在span标签上时显示。我该怎么做？

我的完整代码：http://jsfiddle.net/TheAmazingKnight/Mu2TS/

我的 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>

Answer 1

如果您重新构建了HTML，因此定义div紧跟在目标span之后，您可以使用CSS next-sibling选择器+来显示{{ 1}}当div被徘徊时。

新HTML：

span

新CSS：

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>

将鼠标悬停在某个部分的span标记上时如何调出div框？

1 个答案: