I'm creating a button (actually just a link), which design is rather complicated, and as I am optimizing for IE8, can not be made with CSS3. I have therefore placed a <span> inside the <a>, and put a background image on both.
The image changes on :hover and :active. It works pretty great in all browsers, but not so much in IE. :hover works fine, but when clicking on the <span>, the :active state of the parent <a> is not triggered. It sort of makes sense, but I've seen it work before, so I guess there must be some workaround?
Here's a fiddle: http://jsfiddle.net/TheNix/EtjL3/
You can try using the following jQuery to add the css inline on click.
$("a, span").click(function(){
$(this).css("background", "green")
$(this).find("span").css("background", "lime")
});
Here's a jsFiddle for it http://jsfiddle.net/ollie/r5NDw/1/
alternatively you can add classes on click using addClass();
You can set a css class for the active state using jquery or javascript.
Edit
You can set a css class like this...
$(document).ready(function() {
$("a span").click(function() {
$(this).addClass("active");
$(this).parent().addClass("active");
});
});
and Css Style...
a.active { background:green; }
a.active span { background:lime; }
Related
When I click a link the font-size does not get bigger on iOS but on android it does work. How do I get it to work
What I have tried:
ontouchstart="" in the body tag
jQuery:
$(".primary-menu li a").on('click', function() {
$(this).css("font-size", "15px");
});
CSS:
.primary-menu li a:focus {
font-size: 15px !important;
}
Neither the jQuery or CSS Works on the iOS only Android
Thank You
I had the same problem of non working :focus selector (in my case on a button) on iOS and this is my solution:
<button onclick="this.focus()">Button</button>
So it is necessary to manually focus() the button onclick (I have no clue why). In my case it seemed to be to only working solution, tried others here:
https://jsfiddle.net/sz1L75ro/8/
In case of the problem of the threadstarter I would suggest to also add the same onclick listener to the a elements:
<a onclick="this.focus()">Link</a>
By no means an expert on css, or JavaScript for that matter but Googling around the same subject area (pure css event actions for iOS/mobile) has shown me that examples are quite hard to come by, however where I was looking for examples with flyouts here is an interesting example:
[https://codepen.io/Tont/pen/hdsev][1] - Using a checkbox with 'display: none' over a button. The css references whether this input is 'checked' here:
input:checked ~ ul.submenu{
max-height:300px;
transition:max-height 0.5s ease-in;
}
The same hidden checkbox methodology could be used to implement a pure css 'click' event handler with the action to be taken being change the font size of the <a> element.
Can't really help you with the JQuery as I don't have a way to test my code easily on iOS, however maybe try .setAttribute(<attribute_name>, <attribute_value>) instead of .css.
I have the following example in http://jsfiddle.net/uA97K/
What I am trying to achieve is to keep the same colour on a selected tab as the hover. So when a user clicks on a tab, that selected tab will remain blue until another tab is selected.
I thought this could be done by using a:target but does look to be working.
#bar a:target { background: #00A3EF; color: #003366;}
Any ideas what I may be doing wrong?
With only CSS, you can't do it. But you can use jQuery, and an .active class for this:
http://jsfiddle.net/uA97K/1/
$('#bar a').click(function(){
$('.active').removeClass('active');
$(this).addClass('active')
});
This is, as already noted, impossible with CSS currently. It is, however, possible with plain JavaScript (albeit the following demonstration works only with browsers that support document.querySelector(), addEventListener() and the element.classList API):
function hashMonitor() {
var D = document,
active = D.querySelector('a.active'),
link = D.querySelector('[href="#' + D.querySelector(':target').id + '"]');
if (active) {
active.classList.remove('active');
}
link.classList.add('active');
}
window.addEventListener('hashchange', hashMonitor, false);
JS Fiddle demo.
Conceivably, under Level 4 of CSS (currently entirely unsupported in the wild) this could become possible, but until implementations appear it seems fruitless to speculate on how such selectors might be used.
References:
CSS Selectors, Level 4.
document.querySelector().
element.classList.
EventTarget.addEventListener().
I have an anchor element with a title attribute. I want to hide the popup that appears when hovering over it in the browser window.
In my case, it is not possible to do something like this,
$("a").attr("title", "");
Because of jQuery Mobile the title will reappear after certain events occur (basically everytime the anchor element gets redrawn).
So I hope to hide the title via CSS.
Something like:
a[title] {
display : none;
}
doesn't work, since it hides the entire anchor element. I want to hide the title only. Is this even possible? The popup shouldn't display.
Using the following CSS property will ensure that the title attribute text does not appear upon hover:
pointer-events: none;
Keep in mind that JS is a better solution since this CSS property will ensure that the element is never the target of any mouse events.
You can wrap your inner text in a span and give that an empty title attribute.
<a href="" title="Something">
<span title="">Your text</span>
</a>
As per #boltClock's suggestion, I'll say I don't feel that a CSS solution is appropriate here, as the browser decides what to do with the title attribute of a link, or anything for that matter. CSS, to my knowledge, is unable to handle this issue.
As mentioned, using jQuery to replace the title with an empty string wont work because jQuery mobile rewrites them at some points. This, however, will work independently of JQM, and doesn't involve entirely removing the title attribute which is SEO important.
This works:
$('a["title"]').on('mouseenter', function(e){
e.preventDefault();
});
I changed my initial code of $('body').on('mouseenter') to this after testing. This is confirmed to work.
In CSS it's not possible, because you can only add contents to DOM (tipically with :before :after and content: '...';, not remove or change attributes.
The only way is to create a live custom event (es. "change-something"):
$("a").on("change-something", function(event) { this.removeAttr("title"); });
and trigger to every changes:
... $("a").trigger("change-something");
More information and demo here:
http://api.jquery.com/trigger/
http://api.jquery.com/removeAttr/
try to change your code using this
$(document).ready(function() {
$("a").removeAttr("title");
});
this will remove title attribute so the hint label won't be appear when hover on the link
$("#test").tooltip({title: false});
There title attribute default value is true, make it false.
This will work only in case of Bootstrap Tooltip
Full working pure javascript solution
var anchors = document.querySelectorAll('a[title]');
for (let i = anchors.length - 1; i >= 0; i--) {
anchors[i].addEventListener('mouseenter', function(e){
anchors[i].setAttribute('data-title', anchors[i].title);
anchors[i].removeAttribute('title');
});
anchors[i].addEventListener('mouseleave', function(e){
anchors[i].title = anchors[i].getAttribute('data-title');
anchors[i].removeAttribute('data-title');
});
}
In CSS you can do this:
nav:hover a {
But is there a way of changing nav when a is hovered?
Use the javascript event onHover
In jquery, it's something like that:
$("a").hover(function () {
$('#nav').css("color","red");
});
Coming Soon, to CSS
Explicit subjects in a selector are coming in CSS, but we'll have to wait just a bit longer. Soon you will be able to explicitly declare which element is the subject, for instance with your code:
$nav a:hover {
background: red;
}
This would change a nav's background to read when any of its anchor descendants are hovered.
Source: Selectors Level 4 » Determining the Subject of a Selector
Until this is implemented, you'll have to use JavaScript (or one of the tools built with it, such as jQuery, Mootools, etc) to accomplish a task like this.
Doing it with jQuery
You can accomplish this with jQuery, by adding and removing a class when any of the elements nested anchors are hovered or exited:
$("nav").on("mouseenter mouseleave", "a", function(e){
$(e.delegateTarget).toggleClass("hovered", e.type === "mouseenter" );
});
Demo: http://jsfiddle.net/jonathansampson/EPRRy/1/
This it the most compatible way
$("a").hover(function () {
$(this).parent().css({color:"red"});
});
No there isn't a way to ascend elements with CSS. To do explicitly what you described, it would require some JS.
#ssx had it close, but not quite, to do what your are asking with JS (and I'm going to simplify and use jQuery).
$("nav a:hover").hover(function() {
$(this).parent().css({'color': 'red'});
}), function() {
$(this).parent().css({'color': 'black'})
});
This gives changes the color to read, then back to black when the hover loses focus.
There is no solution for this in CSS 2 (dont know about CSS 3).
Javascript solution is easy and answered by other members.
You can try LESS. Using LESS you can do some conditional styling on DOM.
It will soon be intoduced in CSS 4. This is 5 or 6th question of the day i have seen today. I think it should be soon implemented by browser vendors.
Is there a way to have CSS3 transitions/animations for a div that's just been added to/removed from the window or just has its style assigned? One scenario would be a tab control where the content has transitions when a tab header is clicked; this is normally done by assigning a different CSS style to the div that contains the content (without transition) that you want to display:
tabs-content > div{display:none;}
tabs-content > div.active{display:block;}
It occurred to me that most of the examples out there are using CSS3 transitions triggered by :hover.
Try this:
tabs-content > div{
opacity:0;
-moz-opacity:0;
-webkit-opacity:0;
transition-duration:1s;
-moz-transition-duration:1s;
-webkit-transition-duration:1s;
}
tabs-content:active > div{
opacity:1;
-moz-opacity:1;
-webkit-opacity:1;
}
You can see this live on jsFiddle.
CSS can't be triggered like that. You'll have to use JavaScript to either add a class to that element and let CSS animate it (I doubt it will work), or animate it directly with JavaScript.
I'd choose the latter.
For transitions/animations: I would use jQuery because you can delegate events to elements that may not have been created yet. You also have more control and if you add/remove elements using jQuery then you can add animation at the same time.
css:
.elementInactive {
display:none;
}
jquery:
$('tabs-content > div').hover(function() {
$(this).toggleClass('elementInactive');
});
For swapping one style with another (not an animation): I would use css' :hover property. Support for this property dates back long before CSS3, so it is a safe solution. IE has problems with using a 'div' element with :hover, so use an 'a' element with display:block to treat it like a div:
css:
tabs-content > a:hover {display:block;}
tabs-content > a {display:none;}