CSS: изменить цвет при наведении

Так что я работал над сайтом с кликабельными изображениями, но не могу получить ...:hover право. Я хочу, чтобы картинка была наложена белым цветом с непрозрачностью 0,1.

<html>
<head>
    <style>
        body {padding: 0; margin: 0;}
        img {
            margin-top: -10px;
            width: 100%;
            height: auto;
        }
        a:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
        #asca:hover {background-color: rgba(255, 255, 255, 0.1);}
        #fhca:hover {background-color: rgba(255, 255, 255, 0.1);}
        #asca img:hover {background-color: rgba(255, 255, 255, 0.1);}
        #fhca img:hover {background-color: rgba(255, 255, 255, 0.1);}
    </style>
</head>
<body>
    <a id="asca" href="asc.php">
        <img src="Pictures/chevcorvette4kp.png" width="4096" height="900"  alt="ascpic">
    </a>
    <a id="fhca" href="fhc.php">
        <img src="Pictures/fhyper.png" width="4096" height="900"  alt="fhcpic"> 
    </a>
</body>
</html>

Как вы видите, я действительно пытался изменить все на этот цвет при наведении, но, похоже, это не сработало.

Источник

5 ответов

Решение

Попробуйте использовать непрозрачность, фон не будет действовать..

 body {padding: 0; margin: 0;}
        img {
            margin-top: -10px;
            width: 100%;
            height: auto;
        }
        a:hover img{
            opacity:0.2;
        }
        #asca:hover {background-color: rgba(255, 255, 255, 0.1);}
        #fhca:hover {background-color: rgba(255, 255, 255, 0.1);}
        #asca img:hover {background-color: rgba(255, 255, 255, 0.1);}
        #fhca img:hover {background-color: rgba(255, 255, 255, 0.1);}
<a id="asca" href="asc.php">
        <img src="http://via.placeholder.com/350x150"   alt="ascpic">
    </a>
    <a id="fhca" href="fhc.php">
        <img src="http://via.placeholder.com/350x150"   alt="fhcpic"> 
    </a>

Источник

Это не работает, потому что изображение покрывает свое собственное background-color, Есть несколько способов достичь желаемого эффекта, но самый простой и понятный - просто использовать background-color на тегах привязки и измените непрозрачность на изображении при наведении курсора.

<html>
<head>
    <style>
        body {padding: 0; margin: 0;}
        img {
            margin-top: -10px;
            width: 100%;
            height: auto;
        }

        #asca,
        #fhca {
            background-color: rgb(255,255,255);
        }

        #asca:hover img,
        #fhca:hover img {
            opacity: 0.9;
        }
    </style>
</head>
<body>
    <a id="asca" href="asc.php">
        <img src="Pictures/chevcorvette4kp.png" width="4096" height="900"  alt="ascpic">
    </a>
    <a id="fhca" href="fhc.php">
        <img src="Pictures/fhyper.png" width="4096" height="900"  alt="fhcpic"> 
    </a>
</body>
</html>
Источник

Проблема с вашим CSS заключается в том, что цвет фона, установленный при наведении, находится за изображением переднего плана и никогда не виден, потому что изображение переднего плана блокирует его.

Сохраняя текущий HTML-код, если вы обновите свой CSS-код до чего-то подобного, он достигнет желаемого эффекта. (Заметные части CSS прокомментированы)

<style>
    body {padding: 0; margin: 0;}
    img {
        margin-top: -10px;
        width: 100%;
        height: auto;
    }
    a {
        background-color: #fff; /* Give the <a> tag a white background */
    }
    a:hover img {
        opacity: .9; /* reduce the transparency of the foreground image by 10%, allowing the white background to show through 10%. */
    }
</style>
Источник

Попробуй это:

a {
    position:relative;
    overflow:hidden;
}
a:before{
    content: "";
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color:rgba(255, 255, 255, 0.78);
    opacity: 0;
    transition:all ease .3s;
}
a:hover:before {
    opacity:1;
}
Источник

Я не могу сейчас проверить, но вы можете попробовать использовать свойства z-index.

img {
    margin-top: -10px;
    width: 100%;
    height: auto;
    z-index: 0;
}
a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    z-index: 10;
}
Источник
Другие вопросы по тегам