我试图弄清楚如何将鼠标悬停在一个span标签上，然后调出一个自定义的div框？现在，我将span标签归因于title，它将自动悬停并解释它的含义，但是我不希望浏览器使用默认的标签，而是希望使用我自己的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’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’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>
如果您的重组HTML这样定义div小号中目标后立即spanS，您可以使用CSS下一兄弟选择，+并展示div了当span被徘徊。
新的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>
新CSS：
.definition{
display: none;
position: absolute;
/* other styles */
}
.hard-word:hover + .definition{
display: block;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句