css - 当用户在Tumblr上悬停一个Div时，如何显示一个Div？

我是HTML / CSS的新手，我只需要一些基础知识即可。我已经研究了如何去做我要问的事情，但是对于我的项目，互联网上没有任何答案，我不知道这是否是因为我在Tumblr上工作。

基本上这是代码。当鼠标悬停在#notesbox上时，我希望#post淡入。
这是用于两个Div的CSS：

    #post{
    position: relative;
    width:250px;
    height: 250px;
    overflow:hidden;
    float:left;
    font-family: "helvetica";
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    }

和

#notesbox {
    color: white;
    position: absolute;
    text-align: center;
    float: center;
    width: 100%;
    height:20px;
    background-color: black;
    opacity: 0;
    -webkit-transition: all ease 1s;
    -moz-transition: all ease 1s;
    -o-transition: all ease 1s;
    -ms-transition: all ease 1s;
    transition: all ease 1s;
    }

谢谢您的帮助，也感谢您的无知，因为我说过我很新，所以请放轻松！

编辑：这是它的HTML。

<center>
<div id = "postholder">
{block:Posts}
<div id="cent">
</div>
<div id="post">

{block:Title}{Title}{/block:Title}

{block:Text}{Body}{/block:Text}

{block:Photo}

<div id = "photo">
<div id = "notesbox">
<div id = "notes">
REBLOGGED FROM
<div id = "reblogged">
{block:RebloggedFrom} {ReblogParentName} {/block:RebloggedFrom}
</div>
</div>
</div>
<a href="{permalink}"><img class = "default" img src="{PhotoURL-500}" width="250"/></a>
</div>
{/block:Photo}

{/ block：Post}在代码的后面。

最佳答案

正如一些评论所说，您的html在这里会很有帮助，但是我想无论如何我都可以帮助您解决问题。
我的解决方案使用javascript。您可以使用javascript做很多事情，而且学习起来并不难，我建议，如果您正在构建一个网站，则可以学习它。

在您的html上，向#post添加“ onmouseover”事件。

 <div id="post" onmouseover="someFunction()"></div>

上面的代码意味着，当鼠标悬停在除法（或除法）上时，脚本中的函数“ someFunction（）”（只是一个虚构的名称）将被触发。

这是脚本（如果您没有很多脚本，则可以将其添加到head标签之间的某个位置。通常我使用单独的javascript文件，但这不是必需的）。

<script language="JavaScript" type="text/javascript">
   function someFunction(){
      document.getElementById("notesbox").style.opacity="0.25";
      document.getElementById("notesbox").style.filter="alpha(opacity=25)";
   }
</script>

它的作用是，当触发函数“ someFunction（）”时，它将在文档中搜索具有“ id”“ notesbox”的元素，并将其css（样式）更改为包括“ opacity：0.25;”。

第二行执行相同的操作，并更改为CSS以包括“ filter：alpha（opacity = 25）;”。这两个行都是必须的，这样代码才能在每个浏览器上工作。

希望我回答了你的问题。随意询问是否不清楚。

编辑：回答您的评论。

有许多具有相同“ Id”的部门，使用javascript时会出现问题。您输入的上述脚本仅找到带有“ Id”“ notesbox”的FIRST元素。
我有2种解决方案-一种是将每个分区的“ Id”更改为不同，如果您希望“ notesbox1”，“ notesbox2”等。那么您应该有很多功能，每个“ notesbox”都有一个。 javascript中的每一行都必须进行相应的更改：

...getElementById("notesbox1")...

CSS：

#notesbox1{}
#notesbox2{}

我更喜欢第二个主意。第二个使用“类”而不是“ id”。对于许多元素，具有相同的CSS / JavaScript时，类比分区更好。这比仅对每个不同的分区使用许多功能并更改ID更为复杂，但是它可以更好，更快地工作。在开始解释第二个想法之后，我发现我写了很多，甚至还没完成一半。如果您有时间并且愿意学习一些JavaScript，我很乐意为您提供帮助，但是在投入大量精力之前，我想知道您将实际使用它。

编辑：想法2

我确实相信有更简单的方法可以做到，但是正如我在评论中所说，我自己还是一个业余爱好者。无论哪种方式，都会教给您很多东西。

首先，将您的部门从：

<div id="notesbox"></div>

至

<div class="notesbox"></div>

然后，您的css来自：

#notesbox {}

至：

.notesbox {} /*  On CSS, the '.' marks a class and the '#' marks an id. */

然后，您的JavaScript也必须更改。
那是前一行：

 document.getElementById("notesbox").style.opacity="0.25";

必须对其进行相应的更改才能找到由ID插入的类。

 document.getElementsByClassName("notesbox")[0].style.opacity="0.25";

有一些差异需要注意。
当javascript获取类时，单词“ Id”必须更改为“ ClassName”。
当javascript获取类时，单词“ Element”必须更改为“ Elements”-这甚至表明了我之前所说的内容：类用于1个以上的元素。
在'（“ notesbox”）后面是[数字]，在最上面的示例中是'0'。 [0]表示所选元素将是具有ClassName（“ notesbox”）的FIRST元素。 Javascript从0开始计数，而不是从1开始计数，因此第二个对象将使用[1]，第三个对象将使用[2]，依此类推。

理解全部之后，您应该在javascript中创建一个“变量”以获取图片编号。代码将使您将鼠标悬停在编号为1的图片上，将出现“ notesbox”类中的第一个元素（元素（“ notesbox”）[0]）

var pic_number;

现在执行功能。

function change_pic_number_1()
{
pic_number=1;
}

触发以上功能后，将pic_number更改为1。我假设只有2张图片，在掌握了这些功能之后，您可以根据需要添加更多图片。

function change_pic_number_2()
    {
    pic_number=2;
    }

显示“ notesbox”的功能将在其中使用“ switch”。开关是一种检查变量内容并采取行动的方法。它接近'if'，但是在有很多选择的情况下更有用。所以：

function showNotesBox(){
switch (pic_number){
   case 1:
      document.getElementsByClassName("notesbox")[0].style.opacity="0.25";
      break;
   case 2:
      document.getElementsByClassName("notesbox")[1].style.opacity="0.25";
      break;
}
}

上面的代码表示：在'case'中var'pic_number'等于1的情况下，执行以下操作直到'break'。在“情况”中，变量“ pic_number”等于2，执行以下操作，直到“ break”。在情况2中，您可以看到[0]变为[1]。
在html中：

<div class="notesbox" onmouseover="change_pic_number_1(); showNotesBox()"></div> //This only makes that when you hover over the notesbox it will be triggered. You need to add the trigger to the photo as well.

因此，它的作用是，当您将鼠标悬停在除法上时，将首先触发函数“ change_pic_number_1（）”，然后触发“ showNotesBox（）”。仔细研究，您会发现这会将除法的不透明度更改为“ 0.25”。

如果您已经了解了这一点（这是不太可能的）并且已经做到了，那么您将遇到一个问题，将鼠标悬停在该部门上之后，它将保持这种状态。要遇到这个问题，我们需要另一个var，switch和function。但是首先要了解上面的部分。

再次，问我您发现不清楚的地方。您还可以阅读有关开关http://www.w3schools.com/js/js_switch.asp的信息，以更好地理解它。阅读我写过几次，直到您认为自己可以从中学到什么。