This question already has answers here:
hover on child without hover effect on parent [duplicate]
(2 answers)
Closed 7 years ago.
I have a fiddle: http://jsfiddle.net/a80h6pts/1/
<style>
.myhover {
width: 120px;
}
.myhover:hover p{
color: #FED242!important;
}
</style>
<div id="divParent" class="myhover">
<p>Some text</p>
<p>Text text text</p>
<div id="divChild" class="myhover">
<p>Example text</p>
</div>
</div>
When my mouse activates the over for #divParent, I want all <p> tags to change color except for the <p> inside #divChild. Then when I move my mouse to #divChild, I want all <p> tags inside it to change color and the <p> of #divParent back to their original color.
I cannot remove or change the class .myhover or use javascript. How can I do it only with CSS?
EDIT:
Badly, some people think i have to use js. I can use js (jquery) with a minimal impact on html/css.
With jQuery you can use:
$('#divParent').mouseover(function () {
$('#divParent > p').addClass('hover')
}).mouseout(function () {
$('#divParent > p').removeClass('hover')
})
$('#divChild').mouseover(function (e) {
e.stopPropagation();
$('#divChild > p').addClass('hover')
}).mouseout(function (e) {
$('#divChild > p').removeClass('hover')
})
.myhover {
width: 120px;
}
.hover {
color: #FED242;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="divParent" class="myhover">
<p>Some text</p>
<p>Text text text</p>
<div id="divChild" class="myhover">
<p>Example text</p>
</div>
</div>
As others have already noted, since there is no parent CSS selector you can't use CSS alone.
Related
This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 5 years ago.
In this example when a paragraph is hovered over its color is changed to blue, I would like all sibling paragraphs to also have this rule applied. Is there a way I can achieve this CSS?
I have the desired functionality working in JavaScript with jQuery, but would like a pure CSS solution.
Edit: It wasn't clear in my original post, this should apply to only select elements. See the updated HTML.
$(".groupHover").hover(
function() {
$(".groupHover").addClass("hoverClass");
},
function() {
$(".groupHover").removeClass("hoverClass");
}
);
.hoverClass {
color: red;
}
.groupHover:hover {
color: blue !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<p class=>Not to be changed!</p>
<p class="groupHover">Line 1</p>
<p class="groupHover">Line 2</p>
<p class=>Not to be changed!</p>
<p class="groupHover">Line 3</p>
<p class="groupHover">Line 4</p>
<p class=>Not to be changed!</p>
Wrap them in a div and put the hover effect on that:
.wrapper:hover .groupHover {
color: red;
}
.wrapper:hover .groupHover:hover {
color: blue; /* try not to use important - it should only be used if you desperately need to override an inline style you have no control over */
}
<div class="wrapper">
<p class="groupHover">Line 1</p>
<p class="groupHover">Line 2</p>
<p class="">No class, stays black</p>
<p class="groupHover">Line 3</p>
<p class="groupHover">Line 4</p>
</div>
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 6 years ago.
i got blocks like these:
<div class="listener" id="123">
<h1>Title</h1>Some text...
<div class="container"></div>
</div>
<br>
<div class="listener" id="456">
<h1>Title</h1>Some text...
<div class="container"></div>
</div>
CSS:
.listener{width:500px;background:red;border:1px solid black}
JavaScript:
document.getElementByClassName("listener").addEventListener("click", function()
{
// get the id of the DIV
// put content inside the class=container inside the DIV with innerHTML
});
What should happen?
After clicking in one of those boxes:
call the function
get the ID of the clicked DIV
put some content inside the DIV (DIV with class=container)
Please NO solution with <a> or jQuery.
Any idea? Thanks!
I have a Fiddle here: https://jsfiddle.net/wwp9jk8t/
document.getElementByClassName("listener") will return nodelist not a DOM element and you can not bind click event to over array-like NodeList. Use [].forEach.call/for-loop to iterate all the elements in nodeList and apply adeventListener to every element.
Also note typo getElementByClassName, it should be getElementsByClassName(plural)
Try this:
[].forEach.call(document.getElementsByClassName("listener"), function(elem) {
elem.addEventListener("click", function() {
alert(this.id);//to get the id attribute of the clicked element..
this.getElementsByClassName("container")[0].innerHTML = "Hello World";
});
})
.listener {
width: 500px;
background: red;
border: 1px solid black
}
<div class="listener" id="123">
<h1>Title</h1>Some text...
<div class="container"></div>
</div>
<br>
<div class="listener" id="456">
<h1>Title</h1>Some text...
<div class="container"></div>
</div>
I have multiple rows with 3 divs per row. Each div consists of two rows; in the first row a picture is displayed, in the second row a description is shown. HTML is like this:
<div id="row">
<div id="block1">
<div id="block1-top"><a><img></a></div>
<div id="block1-bottom">Text here</div>
</div>
<div id="block2">
<div id="block2-top"><a><img></a></div>
<div id="block2-bottom">Text here</div>
</div>
<div id="block3">
<div id="block3-top"><a><img></a></div>
<div id="block3-bottom">Text here</div>
</div>
</div>
<div id="row">
<div id="block1">
<div id="block1-top"><a><img></a></div>
<div id="block1-bottom">Text here</div>
</div>
<div id="block2">
<div id="block2-top"><a><img></a></div>
<div id="block2-bottom">Text here</div>
</div>
<div id="block3">
<div id="block3-top"><a><img></a></div>
<div id="block3-bottom">Text here</div>
</div>
</div>
Some CSS:
#block1, #block2, #block3
{
width: 25%;
height: 150px;
display: inline-block;
vertical-align: top;
background-color: #FFFFFF;
border: 1px solid #154494;
}
#block1-bottom, #block2-bottom, #block3-bottom
{
color:#FFFFFF;
}
I want the color of the text in the bottom of the block to change to #FEB90D on hover of the parent div. So for example when hovering over block1, I want the text color of block1-bottom to change into #FEB90D. I found a script which does this for me:
$(function() {
$('#block1').hover(function() {
$('#block1-bottom').css('color', '#FEB90D');
}, function() {
// on mouseout, reset the background colour
$('#block1-bottom').css('color', '#FFFFFF');
});
});
However, this only works for the first block of the first row. I think this is because the id's of the 1st, 2nd and 3rd blocks have the same name and the script cannot figure out on which block to apply the script.
Does anyone have any thoughts on how to fix this, without changing all the divs id's? I have 11 rows in total so using separate names for each div is not really an option in my opinion. So basically, the scripts needs to change the color of the second child of the hovered div.
You shouldn't be using id for more than one element. Change those ids for classes and it will work.
It's better to do this with CSS
.block1 > .block1-bottom {
color: #FFFFFF;
}
.block1:hover > .block1-bottom {
color: #FEB90D;
}
<div class='block1'>
<p class='block1-top'>This is paragraph 1</p>
<p class='block1-bottom'>This is paragraph 2</p>
</div>
IDs should be unique anyways. If you do it in jQuery, it should look like this.
$(function() {
$('.block1').on("mouseover", function() {
$('.block1-bottom').css('color', '#FEB90D');
}).on("mouseout", function() {
$('.block1-bottom').css('color', '#FFFFFF');
});
});
Ids should be unique. So add necessary classes and use class selector. So code is similar to below
$('.row .box').hover(function() {
$(this).find(".boxbottom").css('color', '#FEB90D');
}, function() {
// on mouseout, reset the background colour
$(this).find(".boxbottom").css('color', '#FFFFFF');
});
Here is the demo https://jsfiddle.net/afnhjdjy/
After you clean up your duplicate IDs problem, you can do this without javascript at all:
<div class="row">
<div class="block">
<div class="block-top"><a><img></a></div>
<div class="block-bottom">Text here</div>
</div>
<div class="block">
<div class="block-top"><a><img></a></div>
<div class="block-bottom">Text here</div>
</div>
</div>
CSS:
.block:hover .block-bottom {color: #FEB90D}
According to this situation:
I want the color of the text in the bottom of the block to change to #FEB90D on hover of the parent div
You may simply use:
.block:hover .block-bottom{
color: #FEB90D;
}
I want to hide the text First Text only, using (opacity:0) when I mouse over the topblock.
<div class="topblock">
First Text
<div class="block">
Inner Text
</div>
</div>
But I When i use following jQuery code i am getting child DIV text also First Text Inner Text
$(".topblock").on("mouseenter",function(){
console.log($(this).text());
$(this).css({"opacity":"0"})
}).on("mouseleave",function(){
});
To do what you require without amending the HTML structure will be exceptionally difficult as you would need to amend the textNode holding the First text value directly.
Instead it would be far simpler to just amend your HTML to wrap that text in another element, such as a span, and perform the operations on that element. Try this:
<div class="topblock">
<span>First Text</span>
<div class="block">
Inner Text
</div>
</div>
$(".topblock").on("hover",function(){
$(this).find('span').toggle();
});
You can't just hide a part of a block. You can put First text in a span and hide the span when your mouse enter the topblock block
Impossible to do using opacity, but you could accomplish it by setting the color to match the background color on hover.
Here's how to achieve the effect while hovering .topblock except when hovering its .block child. Note the use of CSS !important:
$('.topblock').hover(
function() {
$(this).addClass('white');
},
function() {
$(this).removeClass('white');
});
$('.block').hover(
function() {
$('.topblock').addClass('black');
},
function() {
$('.topblock').removeClass('black');
});
.topblock .block, .black {
color: black !important;
}
.white {
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="topblock">
First Text
<div class="block">
Inner Text
</div>
</div>
Need an advanced javascript toggle function.
(I have no experience with writing my own js and hope someone can help me).
When clicking on an img then make an other div from height=0 to height=auto (animated).
I have duplicated the code so the toggle need to show - hide only the childs/parent div and not troggle all divs with the 'i-more' class.
I made a fiddle to show what I want to do:
EXAMPLE IN FIDDLE HERE >
HTML:
<div class="i-holder">
<div class="i-left">
<img class="i-one" src="http://placehold.it/200x120.jpg" />
<div class="i-more">
<img src="http://placehold.it/200x120.jpg" />
<img src="http://placehold.it/200x120.jpg" />
<img src="http://placehold.it/200x120.jpg" />
</div>
</div>
<div class="i-right">
<h2>Header here</h2>
<p>Text here text here text here text here text here text here text here...</p>
<img class="i-btn-more" src="http://placehold.it/40x30.jpg" alt="read more" />
<div class="i-more">
<p>More text here more text more text more text more text more text more text more text more text more text here text here text here text here text here text here text here text here text here text here text here.</p>
<p>More text here more text more text more text more text more text more text more text more text more text here text here text here text here text here text here text here text here text here text here text here.</p>
Show less
</div>
</div>
<div class="clear"></div>
<div>
<h2>More stuff like above here...</h2>
<p>A duplicate from above.</p>
<p>when click on the i-btn-more only that text and thumb will be visible and not all divs with that same class.</p>
</div>
</div>
CSS:
.i-more{height:0; overflow:hidden;}
.i-holder{width:600px; margin:20px; position:relative;}
.i-left img{display:block; margin-bottom:10px;}
.i-left{float:left; width:200px; background:#fc1; min-height:130px; }
.i-right{float:right; width:320px; padding:0 50px 10px 10px; background:#6d1; min-height:130px; }
.i-btn-more{position:absolute; cursor:pointer; margin:-40px 0 0 330px;}
.i-more{clear:both;}
.clear{clear:both;}
Have your styles in a classes, for example to toggle display:
.shown{
display:block;
}
.hidden{
display:none;
}
Then you just have to find what element you want with a jQuery selector.
So:
$('.i-btn-more').click(function(){
$('.classToHide').toggleClass('shown').toggleClass('hidden');
});
Make sure it starts with either the .show class if it is showing or the .hidden class if it is hidden by default. Then the toggleClass function will turn the class on and off; and therefore, the styling.
To select somethings and not certain of those something, use the jQuery .not() function to filter a selector. For example $('.more').not('p').toggleClass('hidden'); will toggle the class hidden for all things with the class .more except <p> paragraphs.
$('.i-btn-more, .i-btn-less').on('click', function (e) {
e.preventDefault();
$(this).parents('.i-holder').find('.i-more').toggleClass('shown hidden');
});
or this code:
;(function() {
'use strict';
$(function() {
var $containers = $('.i-holder');
$containers.each(function() {
var $container = $(this),
$more = $container.find('.i-more'),
$handlers = $container.find('.i-btn-more, .i-btn-less');
$handlers.on('click', function() {
$more.toggleClass('shown hidden');
e.preventDefault();
});
});
});
})(jQuery);