1

画像とテキストが横に並んでいて、ホバーまたは画像をクリックして、これらの両方を同時に変更したいと考えています。

画像とテキストを別々に交換することはできますが、両方を交換することはできません。

HTML

<body>
<div id="page-container">
    <div class="box-container">
        <div class="image-container">
            <a href="#"><img src=".jpg" height="100" width="200"/></a>
        </div>
        <div class="second-image-container">
            <a href="#"><img src=".jpg" height="100" width="200"/></a>
        </div>
        <div id="text">
            <div id="text-box">
                <p>This is some text</p>

                <p id="more-text">This is some more text</p>
            </div>
        </div>
        <div id="text-two">
            <div id="text-box-two">
                <p>This is some text</p>

                <p id="even-more-text">This is some more text</p>
            </div>
        </div>
    </div>
</div>
</div>
</div>
</body>
</html>

CSS

div#text {
    position: absolute;
    background-color: black;
    width: 350px;
    height: 300px;
    top: 10px;
    right: -65px;
}

div#text p {
    position: absolute;
    color: white;
    top: 100px;
    left: 125px;
}

div#text-box p {
    background-color: blue;
    width:
}

div#text-box p#more-text {
    background-color: red;
    top: 65px;
    left: 90px;
}

div.image-container {
    opacity: 1;
    position: absolute;
    z-index: 500
}

div.second-image-container {
    position: absolute;
    top:;
    opacity: 1;
    z-index: 119
}

div#text-two {
    position: absolute;
    background-color: black;
    width: 350px;
    height: 300px;
    right: -65px;
    top: 10px;
}

div#text-box-two p {
    position: absolute;
    background-color: blue;
    z-index: 10
}

div#text-box-two p#more-text {
    background-color: red;
}

    /*and the CSS that makes each individual image and text to swap:*/
div.image-container:hover, div#text:hover {
    opacity: 0
}
4

5 に答える 5

5

個々の div (画像コンテナーとテキスト) のホバーでこれを行う代わりに、含まれている div (ボックス コンテナー) のホバーで不透明度を変更します。CSS は次のようになります。

.box-container:hover .image-container,
.box-container:hover #text {
    opacity: 0;
}
于 2012-07-18T20:03:03.727 に答える
2

下にテキストを含む画像を作成する方法についての私の2セント。どちらかにカーソルを合わせると、画像が15ピクセル上に上がります。テキストは独自の場所にとどまります。私のウェブサイトから直接取得したので、個人的な使用のために編集する必要があるかもしれません。

CSS：

.menu_imgdiv
{
    display:inline-block;
    padding-top:20px;
    padding-left:20px;
    padding-right:20px;
}

.menu_imgdiv p
{
    padding-top:4px;
    text-align:center;
    font-size:larger;
}

.menu_img
{
    width:128px;
    height:128px;
}

.menu_imgdiv:hover .menu_img,
.menu_imgdiv:hover .menu_imgdiv p
{
    margin: -15px 0px 15px;
}

そしてHTML：

<div id="tm_header">  
    <a href="#/"> <div class="menu_imgdiv"> 
    <img class="menu_img" src="images/home.png" />
    <br /> <p>Homepage</p>  </div> </a>
</div>
于 2012-10-24T14:09:45.447 に答える
2

これはクリックで動作しますhttp://dabblet.com/gist/3138537

于 2012-07-18T20:12:03.040 に答える
1

テキストと画像を 1 つの画像 (同じ jpeg、gif、または png で) に変換したい画像で作成し、:hover 関数を使用して画像の背景位置を変更できます。

css は次のようになります。

div.imagecontainer {
width:50px;/*be sure to specify a height & width*/
height:50px;
background:url(images/example.jpeg);
background-position:0px 0px;
overflow:hidden;
}

div.imagecontainer:hover {
background-position:0px -50px;
}

これにより、2 番目のイメージが不要になります。この手法を使用する場合は、そこに書き込む予定のテキストを含む段落要素を必ず追加し、visibility:hidden; のいずれかを使用してください。z-index:-100; または text-indent:1000px; オーバーフローあり:非表示; それを非表示にします。

于 2012-07-18T20:05:04.217 に答える