有角度材质的按钮自动悬停效果

Angular-material md-button automatic hover effect

本文关键字:悬停 按钮      更新时间:2023-09-26

我正在使用Angular-material作为我网站的主要样式框架,我试图删除md-focused类默认添加在确认对话框主按钮。

花了一些时间在网上搜索后,我发现了一个问题,建议以下答案:

var confirm = $mdDialog.confirm({
    onComplete: function afterShowAnimation() {
             var $dialog = angular.element(document.querySelector('md-dialog')),
             $confirmButton = $dialog.find('md-dialog-actions').children()[1];
             angular.element($confirmButton).removeClass('md-focused');
         }
})
.title('my title'))
.textContent('myContent')
.ariaLabel('my aria label')
.ok('ok text')
.cancel('cancel text');

这个解决方案工作得很好,但我不想使用javascript来修改DOM。

我的问题是,是否有任何方法可以仅使用CSS删除以md为中心的类,覆盖类。

如有任何线索,我将不胜感激。

谢谢大家!

Update - resolved

而不是onComplete,我使用optionsOrPreset。focusOnOpen并将其设置为false

代码如下:

var confirm = $mdDialog.confirm({focusOnOpen: false})
    .title('my title'))
    .textContent('myContent')
    .ariaLabel('my aria label')
    .ok('ok text')
    .cancel('cancel text');
$mdDialog.show(confirm).then(...);

你只需要用关键字!important覆盖你想要的每个样式

.md-button.md-focused {
  background-color: rgba(0,0,0,0) !important;
}