Following my code:
HTML:
<div>test</div>
CSS:
div:hover{
background-color: black;
}
How to disable temporary cursor when the cursor is over (even ignoring :hover) the div and enter key is pressed and reenable when the cursor is moved with pure javascript?
Well you could use CSS pointer-events which will stop all mouse events working, which includes :hover.
CSS
div:hover {
background-color:black; /* will not happen */
}
div {
pointer-events: none;
}
Demo
You can force specific cursor shapes with the CSS cursor attribute.
div {
cursor: pointer; /* or any other shape available in the link above */
}
Create a transparent gif and use this code:
cursor: url("transparent.gif"), default;
Related
Consider a scenario where your form utilizes custom radio buttons. These radio buttons have the following CSS applied to them - which creates the illusion of selectable images - no js at all.
#ImageSelector label > input{ /* HIDE RADIO */
display:none;
}
#ImageSelector label > input + img{ /* IMAGE STYLES */
cursor: pointer;
border: 2px solid transparent;
opacity: 0.5;
filter: alpha(opacity=50);
}
#ImageSelector label > input + img:hover{ /* (CHECKED) IMAGE STYLES */
opacity: 1.0;
filter: alpha(opacity=100);
border:2px solid #00a8ff;
}
#ImageSelector label > input:checked + img{ /* (CHECKED) IMAGE STYLES */
opacity: 1.0;
filter: alpha(opacity=100);
border:2px solid #0184c8;
}
The problem occurs when the user attempts to click on an image and the cursor is still moving - the item won't become clicked. This is expected behavior of typical radio buttons. Is there a quick way to make the radio buttons more 'sensitive' to the click action or clickable while the mouse cursor is moving?
UPDATE: https://jsfiddle.net/7aLbgqr6/
Also, the solution can definitely include jQuery - but it MUST as simple as possible.
Thanks!
Modified your fiddle to attach mousedown events to the buttons using jQuery. Additionally, I converted the images to use background-image instead so that the ghost image does not appear when the mouse cursor moves. Just a slight optional improvement.
https://jsfiddle.net/kpLLr03y/6/
on click(ng-click) of any element we will get blue border by default around that element. I don't want the border so, I tried giving css as follow:
div: focus {
outline: none;
border: 0;
}
It will work only on div element, But to reflect on all elements we need to give same css on all elements by doing this we'll increase css code. Is there any way to do that?
*:focus {
outline: none;
border: 0;
}
On my webpage, I have a footer which has a textarea box. When the user clicks in the textarea, I want the rest of the page to darken by 60%, kindof like they are in a modal. I am a noob when it comes to advanced css so I am unsure of the properties to apply.
I am using bootstrap 3, javascript and knockout. I know how to detect when the user is in the text area I just want to change the background so everything else is opaque.
A jsFiddle would be wonderful as well :)
We use a combination of CSS and JQuery JavaScript for that. You'd basically use some Overlay method first to overlay the whole page (e.g. See Technique #1 from the Link).
With the help of JavaScript, We attach to events of the forms to:
Show the Overlay
Make the required form elements, e.g. the first Div inside the form, appear above the Overlay ("z-index" CSS attribute)
CSS:
Overlay has Z-Index 10, so give the relevant element the Z-Index 11 to appear on top:
form > div { z-index: 11; }
this JQuery JavaScript can look like this:
$(document).on("focus", "textarea", function() {
$(".overlay").show();
});
Beware, this is not only a "background" topic, if you want to prevent users to do any interaction with the page, you need an overlay which actually blocks clicks. Also, in our case, we also had to prevent any links to be triggered which are below the overlay. Users were still able to go through the links using the TAB key on they keyboard to navigate to a button and click it using the Space key, so we also added JavaScript code to prevent that when in editing mode.
EDIT: a very basic Fiddle
Here is how I would do this - When the user clicks in the text area, set a class on body, and style the class.
with jQuery (you can use vanilla js too)
$('.my-textarea').on('focus', function() {
$('body').addClass('dark');
});
$('.my-textarea').on('blur', function() {
$('body').removeClass('dark');
});
body.dark {
background-color: #333;
opacity: 0.6;
}
A good solution is to make a modal appear behind the input and not just making the background darker, this can be accomplished with css alone
...
<style>
textarea:focus{
z-index: 901;
position: relative;
}
textarea ~ .textarea-modal{
position: fixed;
background-color: transparent;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 900;
pointer-events: none;
transition: background-color .5s ease;
}
textarea:focus ~ .textarea-modal{
pointer-events: auto;
background-color: rgba(0,0,0,0.3);
}
</style>
...
<div>
<textarea></textarea>
<div class="textarea-modal"></div>
</div>
...
feel free to change the selectors to target specific elements, however at the moment when you focus on the textarea a modal would appear below it with other elements behind.
I'd like to say right off the bat that THIS IS NOT A CSS PROBLEM. The following is simply to demonstrate with css the kind of problem I'm having.
In an html page filled with javascript and css, there is a <div> tag with the following styling:
div {
background-color:#fff;
}
div:hover {
background-color:#f00;
}
div:active {
background-color:#000;
}
Point being, I can tell when the element is being hovered because the background will be red, and I can tell when it is clicked because the background will be black.
What's happening is that the hover styling works, but when I click the element, it doesn't change to the active state until, still holding the mouse button down, I pull the mouse out of the element.
This is probably a result of my messing around with the event handlers on the page, but I'm just wondering if anyone else has come across this phenomenon and knows what it might be.
Edit
Here's what I'm working on: http://faithserve.com/jOS/
Click the "App" Menu, and click start. That button-ish thing is what I'm having the problem with.
You problem is the order of the css definitions. States have a particular order in which they need to be defined. See the end bit of this answer: https://stackoverflow.com/a/7508202/476786
a:link { color: red } /* unvisited links */
a:visited { color: blue } /* visited links */
a:hover { color: yellow } /* user hovers */
a:active { color: lime } /* active links */
Note that the A:hover must be placed after the A:link and A:visited
rules, since otherwise the cascading rules will hide the 'color'
property of the A:hover rule. Similarly, because A:active is placed
after A:hover, the active color (lime) will apply when the user both
activates and hovers over the A element.
In your question you have them the correct way, so it can't be repro'd, whereas I have a demo here which shows the wrong way too: http://jsfiddle.net/pratik136/nbW6L/
/* Right */
div.right {
background-color:#fff;
}
div.right:hover {
background-color:#f00;
}
div.right:active {
background-color:#000;
}
/* Wrong */
div.wrong {
background-color:#fff;
}
div.wrong:active {
background-color:#000;
}
div.wrong:hover {
background-color:#f00;
}
You have to be sure CSS rule :hover is setted before :active. You could use that instead of just :active :
div:hover:active {
background-color:#000;
}
DEMO
I have a page that scrolls sideways and I have a floating menu. I want the text in the menu to invert the color that is under it. Is there a way to do that with HTML5, Javascript, and/or jQuery?
Added: How would you invert an image when it goes over different parts of the page? CSS?
This is the bit of CSS I use for the menu
body{
background:#000;
font-family:Georgia;
font-size: 34px;
font-style: italic;
letter-spacing:-1px;
width:12000px;
position:absolute;
top:0px;
left:0px;
bottom:0px;
}
ul#banner{
position: fixed;
line-height: 45px;
margin: 0 30px; padding: 0;
}
step1. Get the position of your menu
step2. Remove your menu and get an element that is placed on the position
maybe you can use document.elementFromPoint
step3. Invert the element's color and apply it on your menu
step4. Show your menu again
step5. Repeat it whenever you need to change menu's color(scroll, etc.)
Try to use:
var color = // color in hex.
color ^ 0xFFFFFF (XOR bit operator) to get it?
I wrote a test page.
demo here.
inside body can't write width, or will make the page appears the scroll bar.
including the following knowledge point:
css cover:
.nav .selected .nav-01{background:#f93;}
.nav .selected .nav-02{background:#3c3;}
.nav .selected .nav-03{background:#36c;}
jquery plugin:
(function($){
$.fn.extend({
first: function(){ },
second: function(){}
});
}(jQuery));
jquery call
$(document).ready(function(){
$('#content').scrollPage({
pTag : '.list',
menu : '.nav',
speed : 600
});
})