0

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>
4

1 に答える 1

1

div定義が target の直後になるように HTML を再構築した場合span、CSS の next-sibling セレクター を使用して、 がホバーされたときに+を表示できます。divspan

新しい 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 に答える