Question

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

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

以下是网站：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>

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

汤姆

Answer 1

伴随文本未点亮的原因是因为它位于不同的元素中。

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

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

解决问题的另一种方法是添加一些点亮这两个部分的javascript。

Answer 2

我认为您可能会误解类/悬停事物应该如何工作。当你写：

.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很容易，因此它们可以处理任意数量的不同图像 - 如果您也希望看到该示例，请告诉我们。

不使用多个元素的类

2 个答案: