1

我正在创建一个灯箱。当您将鼠标悬停在图像上时，随附的文本和相关图像也应该亮起。但是，随附的文本不是。

它们都在同一个类中，但文本是页面下方的 ap 内标记。

这是网站：www.rosiehardwick.co.uk

.nationaltrust {
background-color:red;
-webkit-transition: opacity 0.5s linear; 
opacity: 0.05;
}


.nationaltrust:hover {
-webkit-transition: opacity 0.5s linear; 
opacity: 1;
}

和html：

 </div>
<div id="image-wrap">
<div class="nationaltrust">
<img src="/images/ss.gif"/>
<img src="/images/aw.gif"/>
</div>

</div>

<div id="para-wrap">
<div class="nationaltrust"><p>
blahblah</p></div></div>

感谢您的帮助，我对此很陌生，

汤姆

4

2 回答 2

1

随附文本未亮起的原因是它位于不同的元素中。

该.nationaltrust:hover规则只会影响.nationaltrust鼠标指针悬停的实际元素，并且由于文本位于不同的元素中，因此它不会被点亮。但是，如果您将鼠标指针悬停在文本元素上，则该元素应该会亮起，但图像不会亮起。

解决此问题的一种方法是将图像和随附的文本包装在同一个 div 元素中，并将悬停规则指向该元素。

解决它的另一种方法是添加一些 javascript 来点亮两个 div。

于 2012-07-03T13:33:37.493 回答
1

我想你可能会误解类/悬停的东西应该如何工作。当你写：

.someClass:hover {color: red}

您是在告诉浏览器“当任何具有类 'someClass' 的元素悬停时，使其颜色变为红色”。这并不意味着“使每个带有类 'someClass' 的元素都变成红色”。

如果我理解正确，您希望悬停一个元素来更改单独元素的样式。有两种方法可以做到这一点 - 1）将图像和文本都放在一个包含元素中，然后将 :hover 样式应用于它们，或者 2）使用一些 javascript 在两者之间建立连接并根据需要调整样式。

对于＃1：

HTML： 

<div class="nationalTrust">
    <img src="/images/ss.gif"/>
    <p class="caption">Blah blah</p>
</div>

CSS：

.nationalTrust:hover img {
    opacity: 1;
    background-color: red;
}

/* Just to show that you can have different styles for the text and image*/
.nationalTrust:hover .caption {
    opacity: 0.85; 
}

对于您想要做的事情，这可能不起作用：在一个元素中包含图像和文本可能过于严格。在这种情况下，一些javascript是要走的路。这个例子使用 jQuery 来简化事情：

HTML：

<img class="nationaltrust" src="/images/ss.gif"/>

<p class="nationaltrust-caption">Blah-blah</p>

Javascript：

$(function(){
    $('img.nationaltrust').hover(
        function(){
            $('p.nationaltrust-caption').addClass('active'); //When the image is hovered, add the 'active' class to the caption
        },
        function(){
            $('p.nationaltrust-caption').removeClass('active'); //Remove the class when un-hovered.
        }
    )
});

现在，那个 javascript 非常快速和肮脏，但它应该做你想做的事。问题是您需要为页面上的每个图像/标题编写单独的代码（假设它们都有不同的类）。编写 HTML 和 JS 很容易，因此它们可以处理任意数量的不同图像 - 如果您也想查看该示例，请告诉我们。

于 2012-07-03T13:45:43.857 回答