Question

我的样式表有问题（或者我可能需要使用一些JavaScript）。

我有一个包含图像和文本链接的div。图像和文本都链接到另一个页面将鼠标悬停在图像上时，图像不透明度会发生变化，文本颜色会发生变化。这很完美。
悬停文本时，只有文本颜色会发生变化，但我还希望图像的不透明度发生变化。

我找不到我的CSS或我的HTML ...

的错误

这是我的CSS：

.artists_menu{
    width: 100%;
    margin-top: -120px;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: url(grayscale.svg); /* Firefox 4+ */
    filter: gray; /* IE 6-9 */
}

.bandeau{
    height:7px; 
    background-color: #eeeeee
}

.cartouche_crop{
    height: 240px;
    overflow: hidden;
    opacity:1;
    webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -ms-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}

.cartouche_crop:hover{
    opacity:0.7;
    ilter: alpha(opacity=70);
}

h1{
    font-size: 36px;
    text-transform: uppercase;
    font-weight: normal;
    background-color: lightgrey;
}

h1 a:hover{
    color: magenta!important
}

a, a:active, a:visited {
    color: black;
    text-decoration: none;
    transition: 0.2s ease;
    -webkit-transition: color 0.2s ease-in;
    -moz-transition: color 0.2s ease-in;
    -o-transition: color 0.2s ease-in;
    transition: color 0.2s ease-in;
}

a:hover {
    color: magenta
}

我的HTML：

<a href="http://www.amsbooking.fr/mattieumoreau/artists/amine_edge_and_dance/" title="amine edge &#038; dance">
    <div class="bandeau"></div>
    <div id="parent-57" class="parent-page">
        <div class="cartouche_crop">
            <img src="http://www.amsbooking.fr/mattieumoreau/wp-content/uploads/amine_11.jpg" class="artists_menu">
        </div>
        <div class="bandeau"></div>
            <h1>amine edge &#038; dance</h1>                
        <div class="bandeau"></div>
    </div>
</a>

这是一个jsFiddle链接，所以你可以看到它： http://jsfiddle.net/FkWxb/1/

有人可以帮我吗？

Answer 1

您可以将此行添加到您的css代码.parent-page:hover{opacity:0.7;filter: alpha(opacity=70);}

中

http://jsfiddle.net/XKe8L/

Answer 2

您可以尝试将文本和图像封装在div中，并将悬停效果应用于div。

我已将代码包装在div

中

<div id="fancy_hover">
<div class="cartouche_crop">
    <img src="http://www.amsbooking.fr/mattieumoreau/wp-content/uploads/amine_11.jpg" class="artists_menu">
</div>

并在css中引用它

#fancy_hover:hover{opacity:0.7;filter: alpha(opacity=70);}

http://jsfiddle.net/cqVz4/

Answer 3

小提琴：http://jsfiddle.net/FkWxb/3/

替换：

.cartouche_crop:hover{opacity:0.7;filter: alpha(opacity=70);}

按

a:hover .cartouche_crop{opacity:0.7;filter: alpha(opacity=70);}

并删除

h1 a:hover{color: magenta!important}

悬停时Div和文本一起更改

3 个答案: