Как вывести блок div при наведении курсора на тег span в разделе?

0

Я попытался выяснить, как навести курсор на тег span, а затем поднять поле div, которое было настроено? Прямо сейчас у меня есть тег span, приписываемый заголовку, который будет автоматически нависнуть и объяснить, что это такое, но я не хочу использовать его по умолчанию, но вместо этого хочу, чтобы я мог использовать свой собственный div "define_box", который Я сконструировал отображение, когда он зависал над тегом span. Как мне это сделать?

MY FULL CODE ЗДЕСЬ: 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> 
Теги:
hover

1 ответ

1
Лучший ответ

Если вы изменили свой HTML-код, поэтому определение div было сразу после целевого span s, вы можете использовать селектор next-sibling 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;
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню