In my page,I use tooltip which class name is .tooltipcell to the grid cell,and also use tooltip which class name is .tooltipbtn to the button.Now I want to change the background color of the tooltip in grid,but I do not want to affect the background color of the button tooltip.How to do that?I use to codes below,it affects the two tooltip.
method1:both effect
.k-widget.k-tooltip{
background-color:red; //set the desired color
}
method2:both effect
div .k-widget.k-tooltip{
background-color:red; //set the desired color
}
JS
show: function (e) {
e.sender.popup.element.addClass('red-tooltip');
},
and CSS
.red-tooltip {
background-color: #f00 !important;
}
You can do this:
.tooltipcell{background-color:green;}
.tooltipbtn{background-color:green;}
Just incase your div .k-widget.k-tooltip might overwrite the style you may have to target it deeper like this:
div .k-widget.tooltipcell{background-color:green;}
div .k-widget.tooltipbtn{background-color:green;}
The is an amendment to MarioD Answer.
I didn't test it but given that it works, a better practice would be to concatenate these classes. It saves size in the css and improves loading time. Do this:
div .k-widget.tooltipcell, div .k-widget.tooltipbtn {
background-color:green;
}
I had the same problem where I was using kendo tooltip. I wanted to change the CSS of the tooltips only in one place leaving the rest of the tooltips intact.
Using css the normal way to do this would be to use target .widget and .k-tooltip CSS classes.
Although this would change all the tooltips within a page.
So, since I wanted to change only one tooltip (same problem as this post) I had to do a JS approach.
So, I had to use the show function of kendo's tooltip.
Example:
$('.target')..kendoTooltip({
position: 'bottom',
showAfter: 1000,
content: 'test',
function(e) {
e.sender.popup.element.addClass('customClass');
}
}).data('kendoTooltip');
I will try to post here a jsfiddle in few moments.
André
Related
on my website there are some hexagon SVG´s with different colors and a normal .content class with some style.
What i want, is if the user :hover over the SVG the background-color of .content should get a "specific" color.
#hexagon4_work:hover .content{
background-color: #6EC5D3;
}
#hexagon4_work:hover ~ .content{
background-color: #6EC5D3;
}
#hexagon4_work:hover > .content{
background-color: #6EC5D3;
}
#hexagon4_work:hover + .content{
background-color: #6EC5D3;
}
I have already searched about it, but i do not found any solution for this.
What i found was these operators. But these affect only for a child in a parent. / or not?
I´d like to only use CSS, so if it is not possible only in CSS, please tell me that too. (I am a noobie in JS so dont wonder.) :)
Thanks for all following answers.
- MK
There is no CSS-only solution for your Problem. Check the comment from David.
But you could do something with JavaScript.
Add this to your code.
var hex4 = document.getElementById('hexagon4_work');
hex4.addEventListener('mouseover', function(){
document.getElementsByClassName('content')[0]
.style.backgroundColor = '#6EC5D3';
});
hex4.addEventListener('mouseout', function(){
document.getElementsByClassName('content')[0]
.style.backgroundColor = 'transparent';
});
I tried it on your page and it works. For the other hexagons you should copy this code and modify the selecor in first line and the color in line 4.
My recomendation:
Add the CSS transition: background-color 500ms; to the content div. It would be a nice animation.
While there's no way to do this directly (there are no parent selectors in CSS as of 2017), you can do it by creating a child SPAN, setting z-index and its position to push it behind everything else in the parent, and change its background color (parent background = transparent). Check this out
How do I achieve something like this:
*:hover{
background-color:lightblue;
}
I am trying to change background color of any element on the page when hovering on the element. Not sure why it doesnt work.
It works fine http://jsfiddle.net/mendesjuan/9pta8vbz/
The problem is that it's highlighting the entire body since the mouse is over the body, so you don't see highlighting on children any differently.
The following example should clarify it http://jsfiddle.net/mendesjuan/9pta8vbz/1/ It will highlight items inside the body
CSS
body *:hover{
background-color:lightblue;
}
HTML
<p>1 <span>inside</span></p><p>2</p><p>3</p>
It will highlight the paragraphs, but the span will behave the same way since the paragraph will also be highlighted
What you are doing cannot be done with CSS alone, you can use JS to add a CSS class to the element that the mouse is over http://jsfiddle.net/mendesjuan/9pta8vbz/2/
CSS
.highlight {
background-color:lightblue;
}
JavaScript
// This is a simplified version that doesn't take care of edge cases
// known bugs: should use addEventListener, should not wipe out existing `className`,
// e.target is not 100% cross browser, but those are other topics
document.onmouseover = function(e) {
e.target.className = 'highlight';
}
document.onmouseout = function(e) {
e.target.className = '';
}
I can set the text of a span with this css.
.tracking-true .tracking-button-text:before
{
content:"Tracking";
}
But I would like to change the text on hover
Something like this but I can't get it to work.
.tracking-true .tracking-button-text:hover
{
content:"Untrack";
}
Can this be done in css?
Update:
Much like Stackoverflow uses :hover to change the cursor to a pointer or change a background color as a ui hint I am trying to convey to the user the same thing. This element can be clicked on and something will happen.
I don't feel this is an innaporopriate use of CSS.
Do this:
.tracking-true .tracking-button-text:before
{
content:"Tracking";
}
.tracking-true .tracking-button-text:hover:before
{
content:"Untrack";
}
I am trying to make a specific column to blue color.
For that I am using
clientsTable.addColumnStyleName(3,"nameColumn");
And the CSS is:
nameColumn {
color:blue;
}
but it's not doing anything whereas if I change my CSS to this
nameColumn {
background-color:blue;
}
it works, i.e make header color red , but why is not changing text color ?
thanks
addColumnStyleName adds the CSS class to a <col> element in the DOM, and only a handful CSS properties apply there (see also browser compatibility table)
You'd want to apply a CSS class to each cell in the column instead, using Column#setCellStyleNames()
Try
.nameColumn {
color: blue !important;
}
I was wondering how I could set up css pseudo classes, specifically hover so when I hover over an element, like a div with an id, the properties of a different div with an id get changed?
so normally it would be this:
#3dstack:hover {
listed properties
}
I'm not sure what the change would be to have it hover on div with the id 3dstack and have it change another div.
I do not think that is possible unless the element you want to change the properties of is a descendent or a sibling of the hovered element, in which case you can do:
#myElement:hover #myElementDescendent {
background-color: blue;
}
/*or*/
#myElement:hover + #myElementSibling {
background-color: blue;
}
Of course you can always use jquery to do this:
$("#anelement").hover(
function() {
$("otherelement").css("background-color", "blue");
});
See the differences here
This is not possible with CSS alone. You'll have to use a JavaScript event handler. For example, with jQuery's hover:
$('#3dstack').hover(function() {
$('#otherID').toggleClass('properties');
});
DEMO
Visually you can do this using LESS, but under the hood it's actually using JavaScript.