Question

您好我已经修补了一段时间，我终于有了一些进展。

理想情况下，我想隐藏一个div，一旦你突出显示＆＃34; hover me＆＃34; div它的大小增加并显示不同的内容文本和浮动到右侧的图像。

目前，我将新文本显示在新div中，一旦将鼠标悬停在隐藏的旧文件上，使其透明，然后将鼠标悬停在其上方后显示为白色。这会导致一些问题，因为您可以将鼠标悬停在悬停我div之外的透明文本上，以使hover me div触发。

我将网站上传到网址，以便更好地了解我尝试做的网址：http://www.littleroomproductions.com/room/

以下＆＃39;标题1＆＃39;是一个盒子，上面写着“徘徊在我身上”，将鼠标悬停在它上面，你看到内容在扩展，我想要在右边的图像中发生这种情况。请注意，悬停在div中的白色文本一旦悬停，实际上始终在页面上作为透明文本。我想我需要解决这个问题。

以下是我使用

的代码

// HTML

 <section class="box content">
    <div id="tOne"></div>
    <div class="container">
      <h2>Title One</h2>
      <p>This is where text goes </p>
            <div class="someContent">
                <p>hover me</p>
                <p class="pWhite">
                    <!--<img id="work" src="img/work.png">-->
                    Lets check the overview of this content<br>
                    inject more content<br>
                    maybe some more<br>
                    and a little more<br>
                    inject more content<br>
                    maybe some more<br>
                    and a little more<br>
                    inject more content<br>
                    maybe some more<br>
                    and a little more<br>
                    inject more content<br>
                    maybe some more<br>
                    and a little more<br>
                    inject more content<br>
                    maybe some more<br>
                    and a little more<br>
                    inject more content<br>
                    maybe some more<br>
                    and a little more<br>
                    inject more content<br>
                    maybe some more<br>
                    and a little more<br>
                    end statement<br>
                </p>
            </div>
    </div>
  </section>

/ CSS

.someContent {
width: 20%;
margin-left: 60px;
border: 2px solid black;
border-radius: 10px;
text-align: left;
padding: 0px;
color: black;
height: 60px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

}

.highLight {
background: rgba(209, 16, 16, 1);
border: 2px solid black;
overflow: auto;
color: white;
width: 80%;
height: 400px;
background-image: url(img/work.png);
}

.highLight p:first-child {
display: none;
}

section.box .highLight p {
color: white;
font-size: 20px;
}

section.box p {
padding-top: 0;
margin-bottom: 20px;
color: black;
font-size: 20px;
font-family: cursive;
font-weight: 300;
}

section.box .pWhite {
color: transparent;
}

// jQuery理想情况下，解决方案可以在这里找到 //因为我正在尝试学习jQuery

$(document).ready(function() {
$(".someContent").hover( function() {
    $(this).toggleClass("highLight");
}
, function() {
    $(this).toggleClass("highLight");
});
})

感谢提前帮助=）

Answer 1

这很简单。首先，在display:none;

上添加class="pWhite"

.pWhite {
    display:none;
}

提供类或ID选择器以区分<p>标记：

#wow:hover {
    cursor:pointer;
}

这是隐藏和显示的脚本：

<script>
$(document).ready(function () {
    $("#wow").hover(function () {
        $(".pWhite").show(500);
    },

    function () {
        $(".pWhite").hide(500);
    });
});
</script>

演示 here 。

Answer 2

首先，我会将文字和图像放在一张桌子上，这样你就可以将图像放在右边。

<table class="hover-hide">
        <tr>
           <td style="vertical-align:top">
              <p>
                 Lets check the overview of this content<br />
                 inject more content<br />
                 maybe some more<br />
                 and a little more<br />                     
                 end statement<br />
              </p>
           </td>
           <td  style="vertical-align:top">
              <img id="work" src="yourimage.jpg" width="80" height="80" style="vertical-align:top" />
           </td>
        </tr>
     </table>

接下来，我将使用jQuery隐藏和显示文本/图像的方法。 Jquery：

$(document).ready(function () {
   $("#hoverMe").hover(function(){
      $('.hover-hide').show();
   },function(){
   $('.hover-hide').hide();
   });
});

最后使用以下CSS：

.hover-hide{ display:none; }

演示： JSFiddle

如何将我的所有内容隐藏在div中，并在我将鼠标悬停在包括图像之后显示所有内容？

2 个答案: