Not sure if this is possible but I'm trying to display a div if another div which doesn't share the same parent is hovered.
The html looks something like this:
<div class="test">
<div class="hover-me"><p>Hover</p></div>
</div>
// some other content here
<div class="hover-content">
<p>hovered content</p>
</div>
I've tried using
.test:hover + .hover-content {
display: block;
}
But I think this only works if there's no other content in-between? Any suggestions?
Use javascript to listen to the onmouseover event, or jquery to handle the hover event on one and change the display attribute of the other. Using jquery
<script>
$(document).ready(function () {
$(".hover-me").hover(function () {
$(".hover-content").show();
}, function() {
$(".hover-content").hide();
});
});
</script>
If you don't want to use jquery, change your html like so
<div class="test">
<div class="hover-me"
onmouseover="document.getElementById('hover-content').style.display = 'block';"
onmouseout="document.getElementById('hover-content').style.display = 'none';">
<p>Hover</p></div>
</div>
// some other content here
<div class="hover-content" id="hover-content">
<p>hovered content</p>
</div>
notice that I added an id attribute to the hover-content div.
Try this, i think it will help you :
<script>
$(document).ready(function () {
$( ".hover-me" ).mouseenter( function () {
$( ".hover-content" ).show();
}).mouseout(function () {
/*anything you want when mouse leaves the div*/
} );
});
</script>
So you want to display the .hover-content when you hover the test. You can try the following solution. If it does not work, you gotta use javascript to check for the mouseover event. Hope it helps!
.test:hover ~ .hover-content {
display: block;
}
Related
<div></div>
<div> paragraph</div>
<div>paragraph1</div>
I want to change the background color of blank div without changes in Html part. and it should be change only through css
Can any one help me out?
you can use
div:nth-child(2)
[HTML]
<div>
paragraph
</div>
<div>
paragraph1
</div>
[CSS]
div:nth-child(2) {
background-color: pink;
}
https://jsfiddle.net/hass/3f0b0jv1/
Keeping in mind div should be completely empty without any space also.
<div></div>
div:empty
{
background-color:red
}
Try This
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("div:eq(0)").css("color", "red");
$("div:eq(1)").css("color", "yellow");
$("div:eq(2)").css("color", "pink");
});
</script>
I have two different div's I want to make one of them invisible and after clicking the link or button I want it to be visible and the other invisible. I don't know javascript so I know only HTML and CSS. Can I do that with only using HTML&CSS and How can I do that? Thanks.
You need to use jQuery for this.
Just add this line to your head tag:
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
If your HTML is like this:
<div id="div1">This is div1</div>
<div id="div2">This is div2</div>
<button id="button1">Toggle divs</button>
CSS:
#div2 {
display:none;
}
At the bottom of your page, just before the closing tag </body> add the following JavaScript:
<script>
$("#button1").on("click", function () {
$("#div1, #div2").toggle();
}
</script>
Here's a link for a similar example:
http://api.jquery.com/toggle/#entry-examples
I'm trying to create a custom dropdown with two simple elements -- a div for the dropdown header, and a div to contain the items. When the header-div is clicked, the items-div is to be opened, and when the items-div loses focus, it is to be closed.
Code (HTML):
<div id="dd_header" style="width:200px;height:20px;border:1px solid gray"></div>
<div id="dd_items" style="width:200px;height:200px;border:1px solid gray">
Item 1<br/>
Item 2<br/>
Item 3<br/>
</div>
Code (JS):
$("#dd_items").hide();
$("#dd_header").click(function () {
$("#dd_items").show();
});
$("#dd_items").focusout(function () {
$("#dd_items").hide();
});
jsFiddle -- http://jsfiddle.net/FLnHG/
For some reason, the focusout event isn't firing. What am I missing?
(Note: Adding the focusout on #dd_header works, but that doesn't help because the user won't be able to make a selection from the items).
add js code in ready and use mouseout
$(document).ready(function(){
$("#dd_items").hide();
$("#dd_header").click(function () {
$("#dd_items").show();
});
$("#dd_items").mouseout(function () {
$("#dd_items").hide();
});
});
You can try this way:
$("#dd_items").hide();
$("#dd_header, #dd_items").click(function (e) {
e.stopPropagation(); ///<----this stops the event to bubble up at document
$("#dd_items").show();
});
$(document).click(function () {
$("#dd_items").hide();
});
Updated Fiddle
focus event is applicable to a limited set of elements, such as form elements (, , etc.) and links ().
Change:
<div id="dd_header"></div>
to
<input type ="text" id="dd_header" />
JS:
$("#dd_header").focusout(function () {
$("#dd_items").hide();
});
DEMO here.
Item 1<br/>
Item 2<br/>
Item 3<br/>
This are text and text can not get focus so they can not fire focusout event, You need to have link or control instead of this.check this fiddle
Try this:
$(document).ready(function(){
$("#dd_items").hide();
$("#dd_header").click(function () {
$("#dd_items").show();
});
$("#dd_items").mouseleave(function () {
$("#dd_items").hide();
});
});
HTML:
<div id="dd_header" tabindex="-1"></div>
<div id="dd_items">
Item 1<br/>
Item 2<br/>
Item 3<br/>
</div>
jQuery:
$("#dd_items").attr('tabindex',-1).focus(function () {
});
$(window).focusout(function () {
$("#dd_items").hide();
});
Well I'm not sure what you exactly want from the question but looking at the comments on other answers, I came up with a modification to your own fiddle.
I chose to do it without the use of jQuery. It's a very simple CSS solution to perhaps what you want. Only difference if any, is that the list will toggle on hover(instead of click as in your plan)
Try the fiddle and let us know if it works for you.
HTML
<div id="dd_header">
<div id="dd_items">
<ul style="list-style-type:none;">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
CSS
#dd_header {
height: 20px;
width: 200px;
border: 1px solid lightgray;
}
#dd_items {
display: none;
position: absolute;
height:200px;
width: 200px;
background: #fbfbfb;}
#dd_header:hover #dd_items {display: block;}
I have 5 div's all with the same class name like this:
CSS:
.test:hover{
color:red;
}
HTML:
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
Imagine for a moment these Div's are in different parent div's on the page...
I'm trying to find a way so they all change to color:red if i hover my mouse over any of the 5 rather than just the one in question changing...
I can't wrap them in a parent and give that parent a hover how ever... they are not sharing the same parents in the first place.
Does CSS provide a way to do this or am I going to have to rest to JavaScript?
One (plain/vanilla) JavaScript approach that works (in compliant browsers, which support [].forEach(), and document.querySelectorAll()), given that CSS cannot (yet) perform this task, is:
function classToggle (evt, find, toggle) {
[].forEach.call(document.querySelectorAll('.' + find), function(a){
a.classList[evt.type === 'mouseover' ? 'add' : 'remove'](toggle);
});
}
var els = document.querySelectorAll('.test');
for (var i = 0, len = els.length; i<len; i++){
els[i].addEventListener('mouseover', function(e){
classToggle(e, 'test', 'highlight');
});
els[i].addEventListener('mouseout', function(e){
classToggle(e, 'test', 'highlight');
});
}
JS Fiddle demo.
References:
Array.prototype.forEach().
document.querySelectorAll().
Element.classList.
Function.prototype.call().
You could use JQuery to pretty easily achieve what you want... copy this to an .html file to test it...
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
$(".test").hover(
function() {
$(".test").css("background-color", "red");
}, function() {
$(".test").css("background-color", "");
}
);
});
</script>
</head>
<body>
<div class="test">My Div</div><br />
<div class="test">My Div</div><br />
<div class="test">My Div</div><br />
<div class="test">My Div</div><br />
<div class="test">My Div</div>
</body>
</html>
It's impossible to select element's parent via CSS nowadays. So also it's impossible to select element by one element and general parent. It's like a tiny proof.
Here is the code:
css:
.sample{
background: none repeat scroll 0 0 #FFFFFF;
height: 105px;
opacity: 0.1;
position: absolute;
top: 0;
width: 5%;
}
.sample:hover ~ div{
color:red;
cursor:pointer;
}
html:
<div class="sample"></div>
<div class="container">
<div class="test">1111</div>
</div>
<div class="container">
<div class="test">2222</div>
</div>
<div class="container">
<div class="test">3333</div>
</div>
<div class="container">
<div class="test">4444</div>
</div>
<div class="container">
<div class="test">5555</div>
</div>
Check the demo here: http://jsfiddle.net/eN49z/
Quick answer: it is not possible via CSS-only to achieve the effect that you are looking for, as CSS is unable to travel up the parent, but only down the DOM tree to affect elements.
You can, however, rely on JavaScript to achieve the effect. In my example I have chosen to rely on jQuery. You can use various methods to get all other <div>s with the class test, but it depends on how they are nested - are they nested under parents that are siblings, and the level of nesting and etc.
Here is an example markup of the scenario you have described:
<div>
Parent 1
<div class="test"></div>
</div>
<div>
Parent 2
<div class="test"></div>
</div>
<div>
Parent 3
<div class="test"></div>
</div>
The CSS would be simple. The .hover class (not the :hover state) is added dynamically by jQuery (see below):
.test:hover, .test.hover {
background-color: red;
}
The JS would be something like:
$(function() {
$(".test").hover(function() {
// Find '.test' in all siblings of a specific '.test' parent
$(this).parent().siblings().find(".test").addClass("hover");
}, function() {
// You can refine the criteria of which '.test' should be selected.
$(document).find(".test").removeClass("hover");
});
});
http://jsfiddle.net/teddyrised/fHwFf/
I have two divs div1 and div2. I want div2 to be automatically hidden but when i click on preview div then div2 to be made visible and div1 to hide. This is the code i tried but no luck :(
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div2").hide();
$("#preview").click(function() {
$("#div1").hide();
$("#div2").show();
});
});
</script>
<div id="div1">
This is preview Div1. This is preview Div1.
</div>
<div id="div2">
This is preview Div2 to show after div 1 hides.
</div>
<div id="preview" style="color:#999999; font-size:14px">
PREVIEW
</div>
Make sure to watch your selectors. You appear to have forgotten the # for div2. Additionally, you can toggle the visibility of many elements at once with .toggle():
// Short-form of `document.ready`
$(function(){
$("#div2").hide();
$("#preview").on("click", function(){
$("#div1, #div2").toggle();
});
});
Demo: http://jsfiddle.net/dJg8N/
This is an easier way to do it. Hope this helps...
<script type="text/javascript">
$(document).ready(function () {
$("#preview").toggle(function() {
$("#div1").hide();
$("#div2").show();
}, function() {
$("#div1").show();
$("#div2").hide();
});
});
<div id="div1">
This is preview Div1. This is preview Div1.
</div>
<div id="div2" style="display:none;">
This is preview Div2 to show after div 1 hides.
</div>
<div id="preview" style="color:#999999; font-size:14px">
PREVIEW
</div>
If you want the div to be hidden on load, make the style display:none
Use toggle rather than click function.
Links:
JQuery Tutorials
http://docs.jquery.com/Main_Page
http://www.w3schools.com/jquery/default.asp (W3Schools)
http://thenewboston.org/list.php?cat=32 (Video Tutorials)
http://andreehansson.se/the-basics-of-jquery/ (Basic Tutorial)
JQuery References
http://api.jquery.com/
http://oscarotero.com/jquery/
You are missing # hash character before id selectors, this should work:
$(document).ready(function() {
$("#div2").hide();
$("#preview").click(function() {
$("#div1").hide();
$("#div2").show();
});
});
Learn More about jQuery ID Selectors
The second time you're referring to div2, you're not using the # id selector.
There's no element named div2.
$(document).ready(function() {
$('#div2').hide(0);
$('#preview').on('click', function() {
$('#div1').hide(300, function() { // first hide div1
// then show div2
$('#div2').show(300);
});
});
});
You missed # before div2
Working Sample
At first if you want to hide div element with id = "abc" on load and then toggle between hide and show using a button with id = "btn" then,
$(document).ready(function() {
$("#abc").hide();
$("#btn").click(function() {
$("#abc").toggle();
});
});