0

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

我的完整代码在这里：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>
4

1 回答 1

1

如果您重组了 HTML 以使定义divs 紧跟在目标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;
}
于 2013-09-21T23:56:15.550 回答