How to show hidden content on hover in CSS not working
What am I doing wrong? I came from StackOverflow question/2245459 / ... My code is:
#txtleft {
width: 25%;
float: left;
margin-left: 7%;
}
#txtleft.content {
display: none;
}
#txtmiddle {
float: left;
width: 35%;
}
#txtright {
float: left;
width: 25%;
margin-right: 7%;
}
#txtright.content {
display: none;
}
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$(document).ready(function() {
$(".content1").on('hover', function() {
$(".content").css("display", "block");
});
});
</script>
<div id="txtleft">
LEFT SHOWN
<div id="txtleft" class="content">
LEFT hidden</div>
</div>
<div id="txtmiddle">
<div id="txtmiddle" class="content1">
MIDDLE CONTENT</div>
</div>
<div id="txtright">
<div id="txtright" class="content">
right hidden</div>
</div>
I expect it to work fine, but my firefox is not doing anything ..... I just want some code to be centered on the page and when the middle div hovers it should make the content visible on the left and right to the middle div
source to share
Your code seems to work fine.
See fiddle ..
Change <script>
for jquery like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
To remove extra white spacing add it to your CSS
html,body{
margin:0;
padding:0;
}
UPDATE
If you are trying to achieve for example for example: show the div on hover and then hide it when you are not hovering, you can do it with jquery mouseover
and mouseout
.
See the fiddle for this.
And, the modified script would be like this
$(document).ready(function () {
$(".content1").mouseover(function() {
// show the element
$(".content").css("display", "block");
});
$(".content1").mouseout(function(){
// show the element
$(".content").css("display", "none");
});
});
source to share