修改Materialize.css中“.hoverable”class的阴影颜色

Question

我正在尝试更改 Materialize.css 框架中 .hoverable class 的阴影颜色，因为当前颜色在深色背景上不可见。

修改 box-shadow 和 text-shadow 属性无效。

HTML:

<div class="col s12 m3">
        <div class="card hoverable">
            <div class="image">
            <img src=# alt='image' />
            </div>
            <div class="card-content">
                <p class='card-name'>...</p>
                <p class='card-mail'>...</p>
                <p class='card-location'>...</p>
            </div>
        </div>
    </div>

CSS:

.card {
    background-image: linear-gradient(181.8322969733734deg, rgba(13, 33, 130,1) -2.5876288659793687%,rgba(56, 203, 229,1) 84.42268041237114%,rgba(57, 204, 230,1) 84.42268041237114%);
}

.card-name {
    font-weight: bold;
    color: white;
}

Answer 1

要更改 .hoverable 的阴影颜色，您应该覆盖 .card 和 .hoverable class 的 box-shadow。

.card.hoverable {
    box-shadow: 0 2px 2px 0 blue, 0 3px 1px -2px blue, 0 1px 5px 0 blue;
}

并添加您想要的悬停样式：

.card.hoverable:hover {
    box-shadow: 2px 4px 5px 0 blue, 2px 5px 3px -3px blue, 2px 5px 10px 0 blue;
}

您可以使用 cssmatic box-shadow generator 创建您想要的框阴影。

修改Materialize.css中“.hoverable”class的阴影颜色

Modify shadow color of the ".hoverable" class in Materialize.css

css

styling

hover

materialize

box-shadow