Question

我是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}稍后会出现在代码中。

Answer 1

正如一些评论所说，你的html会对我们有所帮助，但我认为无论如何我都可以帮助你解决问题。我的解决方案使用javascript。你可以用javascript做很多事情，而且它并不难学，我建议如果你正在建立一个网站，你就可以学习它。

在你的html上，添加＆＃34; onmouseover＆＃34;事件到#post。

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

上面的代码意味着，当鼠标位于分区（或其他任何东西）时，函数＆＃34; someFunction（）＆＃34;

将触发脚本中的（只是一个组成名称）

这是脚本（如果您没有很多脚本，可以将它添加到头标记之间的某处。通常我使用单独的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>

它的功能是什么，当功能＆＃39; someFunction（）＆＃39;触发后，它会在文档中搜索带有＆＃39; id＆＃39; ＆＃34; notesbox＆＃34;并改变它的css（样式）以包括＆＃34;不透明度：0.25;＆＃34;

第二行执行相同的操作并更改为css以包含＆＃34; filter：alpha（opacity = 25）;＆＃34;代码在每个浏览器上都需要两行。

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

编辑：回答您的评论。

有很多部门使用相同的＆＃39; Id＆＃39;，这在使用javascript时会出现问题。您输入的上述脚本会找到带有＆＃39; Id＆＃39;的FIRST元素。＆＃34; notesbox＆＃34;只要。我有两个解决方案 - 一个是改变每个部门的ID，如果你愿意的话，＃34; notesbox1＆＃34;，＆＃34; notesbox2＆＃34;然后你应该有很多功能，每个功能一个＆＃34; notesbox＆＃34;。 javascript中的每一行都必须相应更改：

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

CSS：

#notesbox1{}
#notesbox2{}

我更喜欢第二个想法。第二个使用＆＃39; class＆＃39;而不是＆＃39; id＆＃39; s。当涉及到许多元素具有相同的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上课时，单词＆＃34; Id＆＃34;必须改为＆＃34; ClassName＆＃34;。当javascript获得一个类时，单词＆＃34; Element＆＃34;必须改为＆＃34;元素＆＃34; - 这甚至表明我之前所说的：类是超过1个元素。在＆＃39;（＆＃34; notesbox＆＃34;）之后出现[数字]，＆＃39; 0＆＃39;在顶部的例子中。 [0]表示所选元素将是具有ClassName的第一个元素（＆＃34; notesbox＆＃34;）。 Javascript从0开始计数，而不是从1开始计数，因此第二个对象将使用[1]，第三个使用[2]，依此类推。

在理解了所有这些之后，你应该制作一个变量＆＃39;在javascript中获取图片编号。如果你将鼠标悬停在一个将被赋予数字1的图片上，那么代码就会生成，＃34; notesbox＆＃34;将出现一个类（元素（＆＃34; notesbox＆＃34;）[0]）

var pic_number;

现在制作功能。

function change_pic_number_1()
{
pic_number=1;
}

上述功能在被触发时会将pic_number更改为1.我会假设只有2个图片，在你掌握它之后你可以根据需要添加更多。

function change_pic_number_2()
    {
    pic_number=2;
    }

制作＆＃39; notesbox＆＃39;显示将使用＆＃39;开关＆＃39;在里面。切换是一种检查变量内容并由其执行操作的方法。它接近于＆＃39;如果＆＃39;但是当有很多选择时更有用。所以：

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;
}
}

上面的代码意味着：在＆＃39; case＆＃39; var＆＃39; pic_number＆＃39;等于1，执行以下操作直到“突破”。在＆＃39;案例＆＃39; var＆＃39; pic_number＆＃39;等于2，执行以下操作直到＆＃39;中断。您可以在案例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.

所以它的作用是，当你将鼠标放在除法上时，首先是函数＆＃34; change_pic_number_1（）＆＃34;将被触发，然后＆＃34; showNotesBox（）＆＃34;。仔细考虑一下，你会发现这会将师的不透明度改变为＆＃39; 0.25＆＃39;

如果你已经理解它（这是非常不可能的）并且已经完成了它，那么你会遇到一个问题，在你将鼠标悬停在该部门之后，它会保持这样的状态。要遇到我们需要另一个var，开关和功能。但首先要理解上面的部分。

再次，问我你发现的不清楚。您还可以阅读有关切换http://www.w3schools.com/js/js_switch.asp的信息，以便更好地了解它。阅读我写过的几次，直到你认为你能理解你的内容为止。

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

1 个答案: