0

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

4

1 回答 1

0

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

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

 <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”的第一个元素。我有 2 个解决方案 - 一个是将每个部门的 'Id' 更改为不同，如果你希望“notesbox1”、“notesbox2”等。那么你应该有很多功能，每个“notesbox”一个。javascript 中的每一行都必须相应地更改：

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

CSS也是：

#notesbox1{}
#notesbox2{}

我更喜欢第二个想法。第二个使用'class'es 而不是'id'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 获得一个类时，“Id”一词必须更改为“ClassName”。当 javascript 获取一个类时，“元素”一词必须更改为“元素”——这甚至表明了我之前所说的：类用于超过 1 个元素。在 '("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”的功能将在其中使用“开关”。开关是一种检查变量内容并按其操作的方法。它接近“如果”，但在有很多选项时更有用。所以：

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

上面的代码意味着：如果 var 'pic_number' 等于 1，则执行以下操作直到 'break'。在 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”。

如果你已经理解了它（这不太可能）并且已经做到了，你会遇到一个问题，在你将鼠标悬停在分区上之后，它会保持这种状态。要遇到这种情况，我们需要另一个 var、switch 和 function。但首先要了解上面的部分。

再次，问我你有什么不清楚的地方。您还可以阅读有关 switch的http://www.w3schools.com/js/js_switch.asp以更好地理解它。把我写的东西读几遍，直到你认为你明白了你能从中得到什么。

于 2013-09-03T12:41:58.790 回答