We Keep Coding

Hover on parent but not on child element

I have an issue where I want to activate hover state on a link when hovering on the container anywhere but except on two buttons save and close. CSS approach is preferred but if not vanilla JavaScript would be fine. Please have have look I have created a codepen

You can not trigger pseudo events. you can give it same styling when the box is hovered:
.box {
display: flex;
padding: 20px;
border-bottom: 1px solid #ccc;
transition: background .3s ease-in-out;
&:hover {
background: #f1f1f1;
a {
color: #525199;
background-color: #e6e6f0;
border-color: #525199;
}
}

This is not possible with pure CSS, as explained on the question How to style the parent element when hovering a child element?
The solution, then, is to add some Javascript to style the parent element, for example by adding a class to the parent element. A simple code snippet to achieve this with your solution, would be the following:
document.querySelectorAll('.save, .cancel').forEach(function(button) {
button.addEventListener("mouseover", function() {
button.parentNode.parentNode.className = 'box nohover';
});
button.addEventListener("mouseout", function() {
button.parentNode.parentNode.className = 'box';
});
});
And you'd then need to style the {{nohover}} class by not changing the background:
.nohover:hover {
background: none;
}
See this codepen for a working demo.

try this:
.box:hover :not(.box--right):hover a {
color: #525199;
background-color: #e6e6f0;
border-color: #525199;
}

Rebind Hover Effect After Click JQuery

So I have this element #box that needs to have a hover effect that displaces itself when hovered. The element will hover correctly using .hover in jQuery, then I need it to be clicked to display something, but after its clicked it should not have the hover effect anymore, so I used .unbind to remove it. Now when the user reclicks the element it will hide the info and then reapply the hover effect. So like a toggle effect. My question is what is the cleanest way to do this.
HTML:
<div class="box" id="box">
<h1 class="headline">ABOUT ME</h1>
</div>
CSS:
.box {
height: 320px;
width: 320px;
background-color: rgba(0, 0, 0, 0.6);
position: relative;
left: 10px;
top: 10px;
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
}
.headline {
margin: 0 auto;
color: white;
text-align: center;
display: block;
padding-top: 130px;
font-family: 'Montserrat', sans-serif;
}
.box_hover {
left: 0px;
top: 0px;
height: 300px;
width: 300px;
}
JQuery:
$(".box").hover(
function() {
$(this).toggleClass("box_hover");
}
);
$('#box').click(function() {
$(this).unbind('mouseenter mouseleave');
});
Here is the JSFiddle
EDIT 1:
To clarify I need it to add the class when its hovered on, then when its clicked maintain the "mouseenter" appearance, then when its re-clicked go back to being able to be hovered and moving based on the "mouseenter", "mouseleave".
Thanks!

Other then unbinding the event you can use a Boolean variable which the click event would toggle, that would control if toggleClass is called or not:
var bind = true;
$(".box").hover(
function() {
if(bind) $(this).toggleClass("box_hover");
}
);
$('#box').click(function() {
bind = !bind;
});
Fiddle Example

You could delegate the mouseenter/mouseleave events on the element when it has the .hover-effect class. Then you can toggle that class when clicking on the element.
In doing so, the mouseenter/mouseleave events will only be triggered when the element has the .hover-effect class, and since the class is toggled on click, you are essentially binding and unbinding the hover event on each click.
Updated Example
$(document).on('mouseenter mouseleave', '.box.hover-effect', function (event) {
$(this).toggleClass("box-hover", event.type === 'mouseenter');
});
$('.box').on('click', function() {
$(this).toggleClass('hover-effect');
});

If I understand the intent correctly, you simply need to toggle the class on click as well:
$('#box').click(function() {
$(this).unbind('mouseenter mouseleave');
$(this).toggleClass("box_hover");
});
Updated JSFiddle showcasing this.
Hope this helps!
EDIT
Depending on how the link will function, you could use a jQuery Mobile popup, and you wouldn't need to change the bindings at all.
You'll need to include the external scripts:
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
And slightly change your HTML:
<div class="box" id="box">
<h1 class="headline">ABOUT ME</h1>
</div>
<div data-role="popup" id="aboutme" class="ui-content">
<h3>Welcome!</h3>
<p>Popup content</p>
</div>
Along with your CSS:
.headline a {
text-decoration: none;
color: inherit !important;
}
Then, for the jQuery, you can simply use:
$('#box').click(function() {
$(this).toggleClass("box_hover");
});
I've created a new JSFiddle showcasing that here.

Set data-attribute in html with jquery or javascript (on click) for a tooltip

I have the following jQuery, CSS and HTML lines:
$("#button").click(function(){
$("#main").data("ot", "test");
});
#main {
display: inline-block;
background-color: red;
padding: 4px;
width: 230px;
text-align: center;
}
#button {
display: inline-block;
padding: 4px;
background-color: green;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main" data-ot="tooltip content" data-ot-delay="0">Div Content (Tooltip Trigger)</div>
<div id="button">Change data-ot to test</div>
OBS: The HTML attribute data-ot is where the tooltip gets the content from...
What I've been trying to do is change the attribute data-ot from it's initial to "test", as shown in the jQuery lines at the snippet.
I even tried using $('#main').attr('data-ot', 'test'); and when I inspect the element in the page it seems to have changed, but the tooltip doesn't recognize the change. During my searches I read that data() and attr() shouldn't be used together for the same porpoise because there might be some conflicts, so I guess that explains why...
I'm really lost on this, any ideas?

As per the plugin documentation you can set or change the attrbutes dynamically.
You can add this code:
var myOpentip = new Opentip($("#main"));
myOpentip.setContent("First Content");
$("#button").click(function() {
myOpentip.setContent("New content");
});
Also, you need to remove data-ot attribute from HTML.
JSFIddle: https://jsfiddle.net/kalimahapps/gu8tu2ev/1/

tooltip value is set when document is built.so if you change it later it will not change the value.

How to disable the click event for the customized checkbox [duplicate]

This question already has answers here:
Events on dynamically added classes
(4 answers)
Closed 7 years ago.
I was trying to disable a customized checkbox using jquery once the class disabled is added. Below is my code what I tried so far.
$('span').click(function(e){
$(this).toggleClass('active');
});
$('.disabled').click(function(e){
e.stopPropagation();
return false;
});
CSS
span{
width: 16px;
height: 16px;
display: inline-block;
cursor: pointer;
background-color: gray;
}
span.disabled{
cursor: not-allowed;
}
cite.fa-check{
font-size: 14px;
color: #fff;
margin-left: 1px;
display: none;
}
span.active cite.fa-check{
display: inline-block;
}
My event should not worked if I add class disabled to my checkbox. Any help would be appreciated. Thanks in advance.
Working Demo

update code to below . jquery not() selector avoid event on mentioned element. you don't need to use $('.disabled') click event.
see working demo on fiddle
$('span').not('.disabled').click(function(e){
$(this).toggleClass('active');
});

you can use hasClass
you need only this js
$('span').click(function(e){
if($(this).hasClass( "disabled" )==false){
$(this).toggleClass('active');
}
});
check this fiddle

Just check if the clicked element is disabled or no by checking for the class if exists or not
$('span').click(function(e){
if($(this).hasClass("disabled"))
{
return false;
}
else
{
$(this).toggleClass('active');
}
});
$('.disabled').click(function(e){
return false;
e.stopPropagation();
});

Change div color on mouse over

I have a line of text (a link) within a div. I'd like the div color to change on mouse over the link. I tried various things without success. You can see my current code here: http://jsfiddle.net/Grek/D3TzM/ Note that I'm not necessarily looking for a jquery solution. Tks for your help
CSS
.source-title-box a{
color:#467FD9;
display:inline-block;
}
.source-title-box a:hover{
color:#666666;
}
.source-title-box hover{background:#cb2326;}
JS:
$('a').hover(function(){
$(this).parent().toggleClass('hover');
});​

you can select below a pseudo class like :hover. No need for javascript at all for this.
http://jsfiddle.net/7bFKq/
.source-title-box:hover{
background-color:#467FD9;
}
.source-title-box:hover a{
color:#FFFFFF;
}
​
If you must do it with a hover on a, you will need javascript.
http://jsfiddle.net/7wwdb/
$('a').hover(function(){
// .closest will get you to the div regardless of what might
// be in between. With .parent you get to the absolute parent, which
// in your case is a span
$(this).closest('.source-title-box').toggleClass('hover');
});​
css is basically the same, just :hover to .hover
.source-title-box.hover{
background-color:#467FD9;
}
.source-title-box.hover a{
color:#FFFFFF;
}

jsFiddle DEMO
Just look for the closest div, the immidiate .parent() was a <span> tag (which aren't automatically block elements by nature, unless you make them that way).
$('.activity-title a').on('mouseover', function () {
$(this).closest('div').toggleClass('hover');
});
$('.activity-title a').on('mouseout', function () {
$(this).closest('div').toggleClass('hover');
});

Changes this:
.source-title-box a
{
color:#467FD9;
display:block;
text-decoration:none;
}
to:
.source-title-box a
{
color:#467FD9;
display:block;
text-decoration:none;
padding:15px;
}
And this:
.source-title-box
{
color: #000;
background: #fff;
padding: 15px;
width: 200px;
position: relative;
margin-top:10px;
border: 1px dotted #666;
}
to:
.source-title-box
{
color:#000;
background:#fff;
width:230px;
position:relative;
margin-top:10px;
border:1px dotted #666;
}
DEMO
No JS required.

Keep the JavaScript you have, and add this CSS class:
.hover {
background-color: #f00;
}
http://jsfiddle.net/RLjvB/

Greg,
There are 2 points:
1) The jquery .hover() function expects two handlers as argument.
One for handlerin (mouse over) and one for handlerout (on mouse out). Giving only one argument uses the argument as an In-Out handler, i.e the same handler for both mouse events.
2) Make sure that the script that you have written (js) is included at the bottom of the page. ie, just before closing the "body" tag.
This is because : the html element may not be loading when the script executes.
...Your HTML Code...
<script>
$('a').hover(function(){
$(this).parent().toggleClass('hover');
});​
</script>
</body>
Hope this helps.