Question

我正在尝试执行CSS转换（opacity:0到opacity:1并进行愉快的转换） - 我正在编写Sass并使用BEM。

我希望能够使用兄弟运算符+，以便我可以维护我的Sass嵌套BEM结构。

当用户将鼠标悬停在.price__text上时，我想将其兄弟元素.price__tooltip的不透明度设置为1

这是我的SCSS作为例子

.price {
    &__text {
        [...]
    }
    &__tooltip {
        transition: all 0.2s ease-in;
        opacity: 0;
        [...]
        &+ .price__text:hover {
            opacity: 1;
        }
    }
}

我认为SCSS中的最后一个选择器&+ .price__text:hover会检测到当兄弟.price__text具有:hover psuedo类时，它会使当前选中的元素{{1}有.price__tooltip - 但这似乎不正确。

Answer 1

尝试这样的事情：

var HtmlScreenshotReporter = require(process.env['USERPROFILE'] + '/node_modules/protractor-jasmine2-screenshot-reporter');  
var utils = require('../util/utils.js');
var reporter = new HtmlScreenshotReporter({
dest: 'target/screenshots_'+ utils.returnToday("_"),
filename: 'AutoTestRun-report.html'
});

beforeLaunch: function() {
    return new Promise(function(resolve){
      reporter.beforeLaunch(resolve);
    });
  },
onPrepare: function () {
    jasmine.getEnv().addReporter(reporter);
    browser.driver.manage().window().maximize();
    browser.driver.get('https://core.arkcase.dev.armedia.com/arkcase/login');
    browser.manage().timeouts().setScriptTimeout(60000);
},

}

有了这个，兄弟.price__tooltip应该在.price__text处于悬停状态时将其不透明度设为1。

使用BEM和Sass进行悬停时的CSS转换

1 个答案: