问题：

引导5：在悬停时更改按钮工具提示背景颜色

宋琛

2023-03-14

我需要一些帮助我想改变工具提示背景颜色基于按钮主色。

例如：如果按钮具有背景色“主色”，则工具提示背景色也应为“主色”。。。

超文本标记语言：

<button type="button" class="btn btn-lg btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Primary">Primary</button>
<button type="button" class="btn btn-lg btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Secondary">Secondary</button>
<button type="button" class="btn btn-lg btn-success" data-bs-toggle="tooltip" data-bs-placement="top" title="Success">Success</button>
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="Danger">Danger</button>
<button type="button" class="btn btn-lg btn-warning" data-bs-toggle="tooltip" data-bs-placement="top" title="Warning">Warning</button>
<button type="button" class="btn btn-lg btn-info" data-bs-toggle="tooltip" data-bs-placement="top" title="Info">Info</button>

jQuery：

(function (window, document, $, undefined) {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });

    $(".btn-primary").hover(function () {
        $(".tooltip-inner").css({ "background-color": "var(--bs-primary)" });
    });

    $(".btn-danger").hover(function () {
        $(".tooltip-inner").css({ "background-color": "var(--bs-danger)" });
    });
})(window, document, jQuery);

实例：https://codepen.io/themes4all/pen/NWabvad

共有1个答案

呼延衡

2023-03-14

您可以使用数据集使其成为动态的。

在javascript中，您只需要在按钮上添加悬停，并在处理程序中根据数据集值添加动态颜色。

    $("button").hover(function () {
        $(".tooltip-inner").css({ "background-color": "var(--bs-" + $(this).data("color") + ")" });
    });

请参见下面的代码段：

(function (window, document, $, undefined) {
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });

    $("button").hover(function () {
        $(".tooltip-inner").css({ "background-color": "var(--bs-" + $(this).data("color") + ")" });
    });
})(window, document, jQuery);

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />

        <title>Bootstrap</title>
    </head>
    <body>
        <div class="container mt-5">
<button type="button" class="btn btn-lg btn-primary" data-bs-toggle="tooltip" data-color="primary" data-bs-placement="top" title="Primary">Primary</button>
<button type="button" class="btn btn-lg btn-secondary" data-bs-toggle="tooltip" data-placement="top" title="Secondary" data-color="secondary">Secondary</button>
<button type="button" class="btn btn-lg btn-success" data-bs-toggle="tooltip" data-placement="top" title="Success" data-color="success">Success</button>
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="tooltip" data-bs-placement="top" title="Danger" data-color="danger">Danger</button>
<button type="button" class="btn btn-lg btn-warning" data-bs-toggle="tooltip" data-bs-placement="top" title="Warning" data-color="warning">Warning</button>
<button type="button" class="btn btn-lg btn-info" data-bs-toggle="tooltip" data-bs-placement="top" title="Info" data-color="info">Info</button>

        </div>
        
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    </body>
</html>

类似资料：

div背景颜色，以更改悬停

问题内容：我正在尝试将鼠标悬停在div的背景颜色上。 div {background：white;} div a：hover {background：grey; 宽度：100％; 显示：块; 文字修饰：无；} 只有 div内的链接获得背景色。如何使整个div获得该背景色？谢谢编辑：如何使整个div充当链接-当您单击该div上的任意位置时，将您带到某个地址。问题答案：当鼠标
如何在悬停时更改按钮的颜色？

问题内容：我需要更改悬停按钮的颜色。这是我的解决方案，但是不起作用。问题答案：表示“正在悬停的链接是该类链接的子链接”。代替。
悬停css上按钮的背景颜色褪色

我正在尝试将按钮的背景色从蓝色淡入白色，并将字体颜色从白色淡入蓝色。我查了其他帖子。这是我的小提琴：http://jsfiddle.net/t533wbuy/1/ 我用这把小提琴作为参考：http://jsfiddle.net/visualdecree/SvjHx/ 我的问题是：我希望它是一个按钮，而不是一个按钮 Css html 点击这里申请 jQuery
CSS引导按钮修改。悬停时颜色只变一半

我不知道我的CSS有什么问题。我试图通过修改默认引导颜色来创建一个名为“btn-success2”的新类，该类具有新的颜色。我试图将悬停颜色设置为白色，但它只改变了一半。顶部仍然是相同的绿色。我的代码如下： jsfiddle：https://jsfiddle.net/ms4uk83e/
更改引导按钮颜色和类点击或悬停/焦点

> 点击一个按钮，我想设置btn危险引导类。我已经在按钮上附加了一个ng click事件，因此不确定如何获得按钮的句柄并仅更改该按钮上的css。我看到的示例中有一个jquery click事件处理程序，但不确定这是否是最好的方法请您就如何处理上述两个问题提出建议？
使用jquery更改悬停时的背景色

因为我使用可变颜色的按钮，我需要添加内联css。悬停颜色是其他变量。我不能在内联css上添加悬停选择器，所以我必须使用js。我试着用. hover（）来做，但是当我悬停按钮时，两种颜色都消失了。代码： HTML:

引导5：在悬停时更改按钮工具提示背景颜色

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档