图片悬停仅改图片背景而非整个容器的技术解决方案咨询

问题说明 #

鼠标悬停在.bau-picture图片上时，其父容器.picture（包含.footer子元素）的整个背景变为黄色，不符合仅修改图片样式的需求。尝试直接给图片设置悬停样式、将.footer背景色设为none均无效，且不能将.footer移出容器否则破坏布局对齐。

解决方案 #

方法1：给Footer设置固定背景色（最简单） #

问题根源是.footer未设置背景色，会继承父容器.picture:hover的黄色背景。只需给.footer添加背景色，即可覆盖父容器的悬停背景：

.footer {
    border-top: 1px solid;
    padding: 5px;
    height: 8vh;
    display: flex;
    align-items: center;
    text-align: left;
    font-size: 4vh;
    background: white; /* 新增：设置与页面背景一致的颜色 */
}

方法2：直接修改图片的悬停样式（更贴合需求） #

如果不需要容器背景变色，而是仅修改图片样式，删除原有的.picture:hover规则，改为给图片添加悬停效果：

/* 删除原有 .picture:hover { background: yellow; } */
.bau-picture:hover {
    filter: brightness(1.1); /* 示例：提亮图片 */
    /* 也可以用其他样式，比如 border: 2px solid yellow; */
}

修改后的完整CSS代码（应用方法1） #

/* Allgemeine Stile */
* {
    padding: 0;
    margin: 0;
    font-family: "Anta", sans-serif;
    font-weight: 400;
    font-style: normal;
    box-sizing: border-box;
}
/* Body-Stile */
body {
    position: relative;
}
/* Header-Stile */
header {
    position: sticky;
    top: 0;
    width: 100%;
    padding-left: 2%;
    padding-right: 2%;
}
/* Listen-Stile */
li {
    list-style: none;
}
/* Link-Stile */
a {
    text-decoration: none;
}
/* Navbar-Stile */
.navbar, .navbar a {
    color: black;
}
/* Markenlogo-Stile */
.nav-branding {
    font-size: 1.875rem;
}
/* Navbar-Stile */
.navbar{
    width: 95%;
    margin: auto;
    min-height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* Menü-Stile */
.nav-menu{
    display: flex;
    justify-content: space-between;
    gap: 3.75rem;
}
/* Bildcontainer-Stile */
#picture-container {
    margin: auto;
    display: flex;
    flex-direction: row;
    margin-left: 2%;
    margin-right: 2%;
}
/* Container-Stile */
.container {
    width: 100%;
    margin: auto;
}
/* Bild-Stile */
.picture {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    border: 1px solid;
    margin-right: 2%;
    margin-left: 2%;
}
/* Erster Fußbereich-Stile */
.footer:first-child {
    border-top: none;
}
/* Fußbereich-Stile */
.footer {
    border-top: 1px solid;
    padding: 5px;
    height: 8vh;
    display: flex;
    align-items: center;
    text-align: left;
    font-size: 4vh;
    background: white; /* 新增背景色 */
}
/* Media-Query-Stile */
.picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.picture:hover {
    background: yellow;
}
/* Media Queries für Bildcontainer bei maximaler Breite von 1280px */
@media(max-width: 1280px) {
    .picture-container {
        width: calc(100% - 2 * 5%);
        margin-left: 5%;
        margin-right: 5%;
    }
}
/* Media Queries für Bildcontainer bei mindestens 1024px Breite */
@media(min-width: 1024px) {
    #picture-container {
        height: 90vh;
    }
}
/* Media Queries für Bildcontainer bei maximaler Breite von 768px */
@media(max-width: 768px) {
    #picture-container {
        flex-direction: column;
        margin: 0;
    }
    .picture {
        border-right: 1px solid;
        margin: 0;
    }
}

内容的提问来源于stack exchange，提问作者Sami-Can Durademir