我在使用 Master Slider 时遇到问题。
它会自动生成很多类。
就我而言,我将视频和图片加载到幻灯片中。
在我检查的代码中:
<?php if($item->type == 1): ?> <!-- is Video -->
<img class="ms-thumb video_slider" ... />
?>
<?php if($item->type == 2): ?> <!-- is Picture -->
<img class="ms-thumb picture_slider" ... />
<div class="picturediv"></div> <!-- I tried to add manual element like that to assign instead of using: `ms-thumb-ol` but it auto remove when slide is generate -->
?>
生成的结构如下:
div.ms-thumb-frame
div.ms-thumb video_slider
div.ms-thumb-ol
div.ms-thumb-frame
div.ms-thumb picture_slider
div.ms-thumb-ol
我想用代码添加一个按钮播放:
div.ms-thumb-frame {
position: relative;
}
div.ms-thumb-frame div.ms-thumb-ol {
position: absolute;
display: block;
background: url(http://www.workbooks.com/sites/default/files/image/play-button-crm-homepage2.png);
height: 55px;
width: 57px;
top: 0;
left:0;
right:0;
bottom:0;
margin:auto;
}
div.ms-thumb-frame div.ms-thumb-ol:hover {
background: url(http://www.workbooks.com/sites/default/files/image/play-button-crm-homepage-11.png);
}
你可以看到,我只对元素 ms-thumb-ol
设置了样式。
这个元素在另一个元素中是相同的。
有什么方法可以同时检查div.ms-thumb picture_slider
和div.ms-thumb-ol
最佳答案
如果您只想编辑 ms-thumb-ol
,您可以使用 css 兄弟组合器,因为它位于 div.ms-thumb picture_slider
旁边。因此,要修改它,请为您的 css 添加此选择器:
div.ms-thumb picture_slider + ms-thumb-ol{
//Whatever code you want that specific button to have but not the other button
}
+
组合子的作用是检查 div.ms-thumb picture_slider
类后面是否跟有 ms-thumb-ol
.如果是,则应用样式。
编辑:
为了使它更简单,将您的代码从现有的更改为:
div.ms-thumb-frame + div.ms-thumb-ol {
position: absolute;
display: block;
background: url(http://www.workbooks.com/sites/default/files/image/play-button-crm-homepage2.png);
height: 55px;
width: 57px;
top: 0;
left:0;
right:0;
bottom:0;
margin:auto;
}
div.ms-thumb-frame + div.ms-thumb-ol:hover {
background: url(http://www.workbooks.com/sites/default/files/image/play- button-crm-homepage-11.png);
}
只要您的 HTML 设置为您在问题中显示的方式,它就可以工作。
请注意,唯一的区别是兄弟组合器 +
。
关于javascript - 如何在 CSS 中检查条件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41240922/