In elementUI, I've got a el-menu component and there is a el-submenu in it,
I can change the bg-color of el-menu-item when I hover it and I code like
.el-menu-item:hover {
background-color: black;
color:white
}
however when I do the same to the el-submenu, it failed
.el-submenu:hover{
background-color: black;
color:white;
}
I tried another way
.el-submenu.is-opened {
background-color: black;
color:white;
}
also can't work
it appears like that
and I want to change the bg-color when I hover the submenu and when it is open
I had the same problem and found that you can do the following to change the background color when hovering over a el-submenu:
.el-submenu__title:hover {
background-color: #000 !important;
}
Related
I want to remove or change the background of the subtitles. I've changed the background-color and background but it doesn't work. can the background change?
::cue {
color: red;
background-color: blue; //or background: blue;
}
the subtitle color changes to red but the background doesn't change at all
I tried the following:
::cue {
color: red;
// take an absurd big outline, because background is only behind the text
outline: 500px solid blue;
// dont know why background-color is not working but background-image does the job
background-image: linear-gradient(blue, blue);
}
I use vue-slick-carousel for a carousel in my project.
I want to change the color of the arrows without changing the style in the module of this package.
I added this code in the main CSS file and this not working for me
.slick-prev:before,
.slick-next:before {
font-size: 20px;
line-height: 1;
opacity: 0.75;
color: red !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
Funny I've had the same problem a while ago, my problem was that I had defined my styles in a scoped style tag.
Try this code in a global style tag:
button.slick-prev:before, button.slick-next:before {
background-color: red !important;
}
Which property of THEMES/CLARO.CSS inside DOJO TOOLKIT shows the text box inside the buttons DIJIT/FORM/BUTTON ??
I would like to remove the black box from the text and icon.
Change the "baseClass" button but it still persists.
Configure the following:
.button0 {
margin: 2px;
padding: 3px;
background-color: #ffec64;
border-radius: 9px;
border: 3px solid #ffaa22;
}
.button0:hover {
background-color: #ffaa22;
}
And add "button0" to "baseClass" of widget.
I found the class that had the box and was able to get it out:
.dijitButtonNode {
border: 0px;
}
I would like to customize my tooltip for my table and I used the following example :
https://datatables.net/beta/1.9/examples/advanced_init/events_post_init.html
I copied CSS and JS tooltip file but my tooltip look like a default one.
How can I customize my tooltip ? Do you have examples ?
Cheers
There is nothing fancy about it, really. It is just a <div> following the mouse showing some content. You can use one of the zillion tooltip / popover plugins out there, or you can do it by yourself. Here is an example showing the content of a hovered row in a "tooltip" :
#tooltip {
position: absolute;
z-index: 1001;
display: none;
border: 2px solid #ebebeb;
border-radius: 5px;
padding: 10px;
background-color: #fff;
}
event handlers
$('#example').on('mousemove', 'tr', function(e) {
var rowData = table.row(this).data().join(',')
$("#tooltip").text(rowData).animate({ left: e.pageX, top: e.pageY }, 1)
if (!$("#tooltip").is(':visible')) $("#tooltip").show()
})
$('#example').on('mouseleave', function(e) {
$("#tooltip").hide()
})
demo -> http://jsfiddle.net/0g2axdt5/
The use of animate() is to avoid flicker.
I want a custom webkit-scrollbar to animate a different background color for the hover state. The code below changes the color on hover but doesn't animate anything. It works on a div so I suspect webkit-scrollbar doesn't play nice with transitions.
::-webkit-scrollbar-thumb {
background-color: #a8a8a8;
-webkit-transition: background-color 1s linear;
}
::-webkit-scrollbar-thumb:hover {
background-color: #f6f6f6;
}
No, it is not implemented. We should file a bug on http://bugs.webkit.org/
You can still apply your transition by setting your -webkit-scrollbar-thumb background-color to inherit and apply transition to parent element - in this case the scrollbar container itself.
The only drawback is that, you have to create an inner container that would mask it's parent color and set scrollbar track background to the same masking color. Here it is an example:
Set container colors and transition
.container {
-webkit-transition: background-color 1s linear;
background-color: #fff;
}
.container:hover {
background-color: #cfcfcf;
}
.container .inner {
background-color: #FFFFFF;
}
Set scrolbar colors
::-webkit-scrollbar-thumb {
background-color: inherit;
}
::-webkit-scrollbar-track {
background: #fff;
}
It is fairly easy to achieve using xb1itz's background-color: inherit; technique in addition with -webkit-background-clip: text;.
Live demo; https://jsfiddle.net/s10f04du/
#media screen and (-webkit-min-device-pixel-ratio:0) {
.container {
overflow-y: scroll;
overflow-x: hidden;
background-color: rgba(0,0,0,0);
-webkit-background-clip: text;
transition: background-color .8s;
}
.container:hover {
background-color: rgba(0,0,0,0.18);
}
.container::-webkit-scrollbar-thumb {
background-color: inherit;
}
}