This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Is there any way to hover over one element and effect a different element?
How to change the div background image,in mouse over the another div,using css .
With the markup you supplied, this is indeed possible with CSS alone:
<a>
<img src="http://placehold.it/100x100" />
<div>
</div>
</a>
You can use the :hover pseudo selector to select the div when the anchor has been hovered
a:hover div
{
background-image: url(http://placehold.it/400x400);
}
This will change the div's background when the anchor is hovered. This doesn't work in all cases, you must be aware of the relationship of the elements and use the appropriate selector. If the elements have no relationship, you will have to use Javascript (or one of its libraries.)
http://jsfiddle.net/Kyle_Sevenoaks/fPGU3/
This will achieve what you're looking for though there are better ways to do this, using sprites and background-position for example. However:
Your HTML
<a class="selector">My Link</a>
Your CSS
.selector {
background-image:url(myImage.jpg);
}
.selector:hover {
background-image:url(myHoverImage.jpg);
}
Jquery solution
HTML
<a class="selector" data-type="bgChanger1">
My Link
</a>
<div data-type="bgChanger1">
...
</div>
JQUERY
$(document).ready(function()
{
var hoverElement = $('.selector'),
dataType = hoverElement.attr('data-type'),
linkedDiv = $('div[data-type="' + data-type + '"]');
hoverElement.hover(function(e)
{
e.preventDefault()
linkedDiv.css('background-image', 'hoverImage.jps');
},
{
linkedDiv.css('background-image', 'normalImage.jpg');
});
});
You can use jquery to do this.
Your markup:
<div id="div1"></div>
<div id="div2"></div>
Your script:
$("#div1").mouseover( function() {
$("#div2").css("background-image", "url('image.png')");
});
just add a jquery script as follows:
$(document).ready(function() {
$('#div1').hover(function(){
$('#div2').css("background","url(image_url)");
});
});
Related
Trying to achieve this HTML shape where I'd like to place many photos inside this shape with onclick method there
It's better to use javascript EventListener rather than onclick.
eg.
let btn = document.getElementById('pictureButton');
btn.addEventListener('click', function(){
document.getElementById('togglepic').style.display = 'block';
});
#togglepic {
display:none;
}
<button id="pictureButton">Click me</button><br/>
<img id="togglepic" src="https://imgur.com/VYWEWRF.png"/>
Obviously, instead of the <img> element, you could add your "carousel" element, but the principle is the same - simply change the display: property from none to block
Let us suppose I have the following DOM
<div class="parent">
<div class="childNotSibling">
</div>
</div>
<div class="elementToSelect">
</div>
Now I would like to select the div with elementToSelect class but only if div with parent class has inside it an element with childNotSibling class. Is it possible to acomplish this using css?
This JSFiddle should do the trick: https://jsfiddle.net/tremor/f4cghd5x/
Using JQuery here is the Javascript portion of the code.
// find all the occurrences of .childNotSibling
$("body").find(".childNotSibling").each(function(index, element) {
// if .childNotSibling's parent has class "parent"
if ($(this).parent().hasClass("parent")) {
// and if the parent's next sibling has "elementToSelect"
if ($(this).parent().next().hasClass("elementToSelect")) {
// do something with that element
$(this).parent().next().css("background-color", "red");
}
}
});
I have 8 hidden sections with display:none; on my site that are triggered with jQuery to show when a select id is selected. When i try to start building the structure inside the hidden element #Restaurant (like this)
<div id="common">
<div id="Restaurant" class="common_reveal">
<div class="common_title">test</div>
</div>
</div>
It doesn't work. However, if i just insert plain text or <span>, it does...
Is there a reason for why it wont display additional <div>'s within the hidden element?
JS
$('#business_type').change(function(){
$("#common div").each(function() {
$(this).attr("style", "display: none;");
})
$("#" + $(this).val()).attr("style", "display: block;");
})
CSS
#common {
}
.common_reveal {display: none;}
You are picking all divs inside your #common element, try this:
$("#common >div").each(...)
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 8 years ago.
I have the following code:
<div class="photos-wrapper" id="detailPhoto">
<div class="pseudo">
fixedTEXT
</div>
<div class="image-wrapper">
</div>
<div class="activites">
</div>
<div class="commentaire">
</div>
</div>
I want to include my own CSS style to this first and main <div class="photos-wrapper" id="detailPhoto"> but the only way to do this is by identify the grandchild selector i.e <a href="#/123456/"> because there are multiple occurrences of the same code.
Maybe it will be a bit more clear when I show what I tried:
a[href*="123456"] > div.pseudo > div.photos-wrapper[id^="detailPhoto"] {
display: none !important;
}
div.photos-wrapper[id^="detailPhoto"] < div.pseudo < a[href*="123456"] {
display: none !important;
}
That's the way I tried to do so but it obviously is not working.
The thing I am probably trying to do here is called a parent selector but I'm not quite sure.
#edit
Let's take a look on this code, it's actually more detailed:
http://jsfiddle.net/60ezqtL7/
The goal is to hide by display: none; style whole divs that are containing exactly the same values i.e. PHOTO 1
There's no need to use jQuery in this case (or many other cases).
detailPhoto.classList.toggle('hide', detailPhoto.querySelector('[href=#/123456]'))
As I mentioned in my comment to your answer, there is not parent or ancestor selecor. The easiest and most efficient way to to it via jQuery is the has() method.
$('#detailPhoto').has('a[href*="123456"]').hide(); // or use .addClass() instead
Use Google to host jquery for you.
Demo : I've used the class selector in the demo as id should be unique.
addClass Demo
UPDATE
Given your update and assuming you want to display 1 and only 1 of each photo, additional wrappers with photos with the same href will be hidden.
/*Loop through each link in div with cass psudo
in a div with class photos-wrapper*/
var found = {};
$(".photos-wrapper .pseudo a").each(function(){
var $this = $(this);
var href = $this.attr("href");
//if the href has been enountered before, hide the .photos-wrapper ancestor
if(found[href]){
$this.closest(".photos-wrapper").hide();
/*Other options:
Use Css direct
$this.closest(".photos-wrapper").css("display", "none");
Assign a duplicate class, then style that class ass appropriate
$this.closest(".photos-wrapper").addClass("duplicate");
*/
}else{
//otherwise add it to the array of what has been found
found[href] = true;
}
});
Demo
If you're not familiar with jquery, make sure to read up on how it is implemented and the purpose of $(document).ready();
Update 2
To hide all containers with replicated href use:
//Loop through each a tag
$(".photos-wrapper .pseudo a").each(function () {
var $this = $(this);
//Get the href
var href = $this.attr("href");
//Check if more than one exists
if ($('.photos-wrapper .pseudo a[href="' + href + '"]').size() > 1) {
//Hide all .photo-wrapper containers that have the replicated href
$('.photos-wrapper .pseudo a[href="' + href + '"]').closest(".photos-wrapper").hide();
}
});
Another Demo
I still suggest removing duplicates server-side if at all possible.
On a complete side note, the <center> tag was depreciated back at HTML4 and should no longer be used. Use CSS instead. There are pleanty of examples out there on how to center content using CSS.
At this time there is not a way to do this with only CSS, but you can do it easily with JQuery. This will search the descendants of #detailPhoto and hide the href (set it to display: none;).
<script>
$(function() {
$('#detailPhoto').find('a[href$="#/123456/"]').hide();
});
</script>
To search parents, you'd use this.
<script>
$(function() {
$('a[href$="#/123456/"]').closest('#detailPhoto').hide();
});
</script>
To use this you will also need the JQuery library added to the head of your document.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
how to change properties of a parent div on hover of child div.
can it be done with pure css ?
html:
<div class="parent">
<div class="child">
</div>
</div>
css:
.parent{width:200px;height:100px;background:#cccccc;}
.child{width:200px;height:100px;background:transparent;}
Not with plain CSS you need some form of script to notify the parent that the child is being hovered(eg.):
<div id="parentId" class="parent">
<div id="childId" onmouseover="doOnMouseOver()" onmouseout="doOnMouseOut()" class="child">
</div>
</div>
<script type="text/javascript">
function doOnMouseOver() {
var parentNode = this.parentNode;
var newParentClass = parentNode.getAttribute('class') + 'child-beeing-hovered';
parentNode.setAttribute('class', parentClass);
}
function doOnMouseOut() {
var parentNode = this.parentNode;
var newParentClass = parentNode.getAttribute('class').replace('child-beeing-hovered', '');
parentNode.setAttribute('class', parentClass);
}
</script>
Note that I've added ids to your html elements so that I can get a hold of them with javascript without making the code unnecessary complex nor using a third party library like jQuery.
Note that you need also to bind onmouseout or otherwise the parent element will keep the new class child-beeing-hovered.
jQuery actually makes your job easier but you should try doing this with javascript at least once.
I hope it helps.
Is there a reason you do not want to use JavaScript or JQuery?
You could simply:
$("#child_id").hover(function (){
$(this).parent("div").addClass("some-class")
});
There is no parent selector in CSS.
You can find quite good explanation why it's not supported here: http://snook.ca/archives/html_and_css/css-parent-selectors