我是HTML/CSS的新手，我只是需要一些基础知识的教育。我已经研究了如何做我问什么，但没有一个答案在互联网上为我的项目工作，我不知道这是不是因为我在Tumblr工作或不是。
基本上这就是代码。当鼠标悬停在#post上时，我希望#notesbox淡出。这是用于两个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()"(这只是一个虚构的名字)将被触发。
这是脚本(如果您没有很多脚本，您可以将它添加到头部标记之间的某个地方)。通常我使用一个单独的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(样式)，包括"透明度:0.25;"
第二行做同样的事情，并改变css，包括"filter:alpha(不透明度=25);"这两行代码都需要在每个浏览器上运行。
希望我回答了你的问题。有什么不清楚的，尽管问。
编辑:回答你的评论
有许多具有相同'Id'的部门，这在使用javascript时产生了问题。您输入的上面的脚本只查找具有"Id"为"notesbox"的第一个元素。我有两个解决方案-一个是改变'Id'是不同的每个划分，如果你希望"notesbox1"，"notesbox2"等。然后你应该有很多函数，每个"笔记盒"对应一个函数。javascript中的每一行都必须进行相应的更改:
...getElementById("notesbox1")...
#notesbox1{}
#notesbox2{}
我更喜欢第二个想法。第二个使用'class'而不是'id'。当涉及到对许多元素使用相同的css/javascript时，类比划分要好。这比为每个不同的除法使用许多函数并更改id要复杂得多，但它工作得更好更快。在开始解释第二个想法之后，我发现我写了很多，甚至还没写到一半。如果你有时间和意愿学习一点javascript，我很乐意帮助你，但在投入这么多精力之前，我想知道你实际上会使用它。
EDIT: Idea #2
我相信有更简单的方法，但正如我在评论中所说，我自己也是一个业余爱好者。不管怎样，这会教会你很多。
首先，改变你的划分:
<div id="notesbox"></div>
<div class="notesbox"></div>
#notesbox {}
:
.notesbox {} /* On CSS, the '.' marks a class and the '#' marks an id. */
那么你的javascript也必须被改变。这是前一行:
document.getElementById("notesbox").style.opacity="0.25";
必须相应地更改以查找class而不是ID。
document.getElementsByClassName("notesbox")[0].style.opacity="0.25";
有几个不同点需要注意。当javascript获得一个类时，单词"Id"必须更改为"ClassName"。当javascript获得一个类时，单词"Element"必须更改为"Elements"-这甚至表明了我之前所说的:类用于多于一个元素。在'("notesbox")之后是一个[number]，在上面的例子中是一个'0'。[0]表示选择的元素将是第一个具有ClassName("notesbox")的元素。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'。在'case'， var '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"。
如果你已经理解了这个除法(这是非常不可能的)并且已经做过了，你会遇到这样一个问题:当你把鼠标悬停在除法上时，它会保持这样。为了解决这个问题，我们需要另一个变量、开关和函数。但首先要理解上面的部分。
再一次，问我你发现什么不清楚。您也可以阅读switch http://www.w3schools.com/js/js_switch.asp来更好地理解它。把我写的东西多读几遍，直到你认为你明白了你能从中学到什么。