Css 类不使用多个元素

我正在创建一个灯箱。当您将鼠标悬停在图像上时，伴随的文本和相关图像也应亮起。然而，所附文本并非如此

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

以下是网站：

和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>

布拉布拉赫

谢谢你的帮助，我对这个很陌生

---

Tom

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

.nationaltrust:hover

规则只会影响鼠标指针悬停的实际

.nationaltrust

元素，并且由于文本位于不同的元素中，因此不会点亮。但是，如果将鼠标指针悬停在文本元素上，则该元素将点亮，而不是图像

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

---

另一种解决方法是添加一点javascript，使两个div都亮起。

我想您可能误解了类/悬停的工作原理。当你写作时：

.someClass:hover {color: red}

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

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

对于#1：

HTML:

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

对于您想要做的事情，这可能不起作用：它可能限制太多，无法在一个元素中同时包含图像和文本。在这种情况下，一些javascript就是一条出路。本例使用jQuery来简化事情：

HTML:

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

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

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

$(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非常简单，因此它们可以处理任意数量的不同图像-如果您也想看这个示例，请告诉我们。

Hello@Tom，欢迎光临。如果相关代码可以发布在这里供人们查看，这将非常有用。这也意味着，一旦你的网站被修复，它将对将来的某个人有用。谢谢Alex，我修改了这篇文章。我不确定我是否理解这个问题：如果我理解正确，问题是他希望这两个

。nationaltrust

divs在他悬停其中一个时亮起。我走开5分钟，看看会发生什么！：）javascript确实需要jQuery，不是吗？是的-我在解释中提到过。确实是这样，我显然是瞎了。谢谢-我将重新调整网站，以允许第一个html建议。还不太习惯使用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.
        }
    )
});