I have tried for a while now to show some text on :hover, is anyone able to explain it for me?
I tried:
#DivForHoverItem:hover #HiddenText {
display: block;}
without luck, sadly. This little piece is in every example I found.
I also failed to understand: https://css-tricks.com/forums/topic/show-text-on-hover-with-css/
I try to get <div id="DivForHoverItem"><p>Shown text</p></div>
<div id="HiddenText"><p>Hidden text</p></div>
CSS:
#HiddenText {
display: none;
}
and the code line up there ^
#DivForHoverItem:hover #HiddenText {
display: block;}
The #HiddenText element has to be inside the #DivForHoverItem element if you want to achieve this with CSS. Try something like this:
#DivForHoverItem {
/*just so we can see it*/
height: 50px;
width: 300px;
background-color: red;
}
#HiddenText {
display: none;
}
#DivForHoverItem:hover #HiddenText {
display:block;
}
<div id="DivForHoverItem">
<div id="HiddenText"><p>Hidden text</p></div>
</div>
jsfiddle link for convenience
If you're okay with using JavaScript you could use:
var outDiv = document.getElementById('DivForHoverItem');
var inDiv = document.getElementById('HiddenText');
outDiv.onmouseover = function() {
inDiv.style.display = 'inline';
};
outDiv.onmouseout = function() {
inDiv.style.display = 'none';
};
Related
I have a search bar which would like to display onto the header on scroll, a great example is like the one on this site: https://www.indiamart.com/
Approach 1 - A simple way to do this would be to detect a scroll & add and remove a class that contains display: none;
You can have an event listener -
window.addEventListener('scroll', function() {
if( window.scrollY !== 0) {
document.getElementById('searchBar').classList.add('scrolled');
} else {
document.getElementById('searchBar').classList.remove('scrolled');
}
});
With the CSS -
.noScroll
{
background: yellow;
position:fixed;
height: 50px; /*Whatever you want*/
width: 100%; /*Whatever you want*/
top:0;
left:0;
display:none;
}
/*Use this class when you want your content to be shown after some scroll*/
.scrolled
{
display: block !important;
}
.parent {
/* something to ensure that the parent container is scrollable */
height: 200vh;
}
And the html would be -
<div class="parent">
<div class ='noScroll' id='searchBar'>Content you want to show on scroll</div>
</div>
Here's a JSFiddle of the same - https://jsfiddle.net/kecnrh3g/
Approach 2 -
Another simple approach would be
<script>
let prevScrollpos = window.pageYOffset;
window.onscroll = function() {
let currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById('searchBar').style.top = '-50px';
} else {
document.getElementById('searchBar').style.top = '0';
}
prevScrollpos = currentScrollPos;
}
</script>
with the html -
<div class="parent">
<div id ='searchBar'>Content you want to show on scroll</div>
</div>
and css
#searchBar {
background: yellow;
position: fixed;
top: 0;
left: 0;
height: 50px;
width: 100%;
display: block;
transition: top 0.3s;
}
.parent {
height: 200vh;
}
Here's a JSFiddle of the same - https://jsfiddle.net/0tkedcns/1/
From the same example, the idea is only to show/hide once user scroll the page using inline css display property, you can do the same or at least provide a code sample so we can help you!
HTML
<div class="search-bar">
<div class="sticky-search">
Sticky Search: <input type="text" value="search" />
</div>
</div>
CSS
.sticky-search {
display:none;
position:fixed;
top:0px;
left:0px;
right:0px;
background:blue;
padding:10px;
}
JS
var searchHeight = $(".search-bar").outerHeight();
var offset = $(".search-bar").offset().top;
var totalHeight = searchHeight + offset;
console.log(totalHeight);
$(window).scroll(function(){
if($(document).scrollTop() >= totalHeight) {
$('.sticky-search').show();
} else {
$('.sticky-search').hide();
}
});
#hello{
font-size: 4em;
}
div.about{
display: none;
}
#hello:hover div.about {
display: block;
}
<pre id="hometext"><span id="hello">Hello!</span></pre>
<div class="about" id="about"><p>hello</p></div>
First of all, I am new to stackoverflow. Secondly, I want to over a specific part of a paragraph, the span, and then let this div appear. But it doesnt seem to work..
You dont have to use javascript:
#hometext:hover + #about { display:none; }
I am not quite sure if this is what you asked for, but you can utilize the span element's onmouseover and onmouseout attributes.
With a little bit of javascript, you can achieve what I think you want to do:
function hideDiv() {
document.getElementById("divToHide").style.visibility = 'hidden';
}
function showDiv() {
document.getElementById("divToHide").style.visibility = 'visible';
}
#divToHide {
height: 100px;
width: 100px;
background: red;
}
#hoverMe {
cursor: pointer;
}
<div id="divToHide">
</div>
<br />
<p>
This is a paragraph. If you hover <span id="hoverMe" onmouseover="hideDiv()" onmouseout="showDiv()">here</span>, it will hide the red box.
</p>
I think you need some javascript there:
function showOtherDiv() {
document.getElementById("about").style.display = "block";
}
function hideOtherDiv() {
document.getElementById("about").style.display = "none";
}
#hello {
font-size: 4em;
}
div.about {
display: none;
}
#hello:hover div.about {
display: block;
}
<pre id="hometext">
<span id="hello" onmouseover="showOtherDiv()" onmouseout="hideOtherDiv()">Hello!</span>
</pre>
<div class="about" id="about">
<p>hello</p>
</div>
Here is a codepen
I want a way (ideally just using CSS HTML) where when I click on Question, the text shows and remains there. Then if they click on text again, it will revert back to question.
It works on hover, but I don't know how to make it on click. HTML:
<div id="packagequestioninfo">
<p class="packagereplies">Question</p>
<p class="packagecomment">If you require <b>hosting</b> for your website, select your primary website and go to <b>Part II</b>. If you do not require hosting, please Checkout below. </p>
</div>
CSS:
#packagequestioninfo {
padding: 10px;
background: #F2F7FA;
border-radius: 0px;
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;
}
#packagequestioninfo:hover {
background-image:url(../img/index/body/ourproducts/light_blue_background_pattern.jpg);
background-repeat:repeat;
cursor: none;
}
#packagequestioninfo .packagecomment {
display: none;
}
#packagequestioninfo:hover .packagereplies {
display: none;
}
#packagequestioninfo:hover .packagecomment {
display: inline;
}
Here is the code http://jsfiddle.net/53UK2/
Make .packagecomment invinsible with css, then use jQuery:
$('p').click(function(){
$('p').toggle();
});
Fiddle: http://fiddle.jshell.net/RcTGN/
If you do not need IE8 and lower support you can do it with pure CSS like this.
This is because of the ":checked" css selector. See support here.
The HTML:
<div class="question">
<input type="checkbox" class="qestion-checkbox" id="q1" />
<label for="q1" class="qestion-text">Question 1 text</label>
<label for="q1" class="qestion-answer">Question 1 answer</label>
</div>
<div class="question">
<input type="checkbox" class="qestion-checkbox" id="q2" />
<label for="q2" class="qestion-text">Question 2 text</label>
<label for="q2" class="qestion-answer">Question 2 answer</label>
</div>
The CSS:
.qestion-answer, .qestion-checkbox {
display: none;
}
.qestion-checkbox:checked + .qestion-text {
display:none;
}
.qestion-checkbox:checked + .qestion-text + .qestion-answer {
display:block;
}
If you do need IE8 and lower support you need to use some javascript/jQuery
It's impossible using only css. Of course you can change :hover instead :active, but it will be work when the mouse button is held down.
Check it.
Why don't you want use jquery? It will be easier.
Non-jquery way...
Just showing and hiding by changing the display style attribute:
HTML:
<script src="javascriptfile.js"></script>
<div id="packagequestioninfo">
<p class="packagereplies">Question</p>
<p class="packagecomment">If you require <b>hosting</b> for your website, select your primary website and go to <b>Part II</b>. If you do not require hosting, please Checkout below. </p>
</div>
javascriptfile.js:
// Wait for the entire window elements to be loaded
window.onload = function() {
document.addEventListener('packagequestioninfo').addEventListener('onclick', function() {
if(document.getElementById('packagecomment').style.display !== 'none') {
document.getElementById('packagecomment').style.display = 'none';
} else {
document.getElementById('packagecomment').style.display = 'block';
}
});
}
or if you'd like to go with the class toggling method:
window.onload = function() {
document.addEventListener('packagequestioninfo').addEventListener('onclick', function() {
if(document.getElementById('packagecomment').className.indexOf('show')) {
document.getElementById('packagecomment').className = '';
} else {
document.getElementById('packagecomment').className = 'show';
}
});
}
in this approach you'll need to add a class to your CSS:
.show{
display:block;
}
Given the following css:
.myDiv:before{
content:'';
width:15px;
height:15px;
display:block;
}
.myDiv:after{
...
...
display:none;
}
and html:
<div class='myDiv'></div>
Is there a way to show the .myDiv:after psuedoelement while hovering over the :before? I know I can use the hover selector as .myDiv:hover:before but I don't know how to access the :after psuedoelement from within that selector.
You can add a new style to display the content in the :after css class although it may not be the best practice.
.myDiv:hover:after {
display:block;
}
http://jsfiddle.net/gk7R2/1/
The only close way that you can do it is if you hover the entire element like this:
.myDiv {
height: 200px;
background: red;
}
.myDiv:before {
content: '';
display: block;
height: 20px;
width: 100%;
background: blue;
}
.myDiv:hover:after {
content: '';
display: block;
height: 20px;
width: 100%;
background: blue;
}
http://jsfiddle.net/Hive7/W4ca3/
You are not able to trigger the :hover::after from executing a :hover::before. You can solve this problem with javascript though. If you're wanting to maintain a clean markup, you could create a loop within this fiddle and dynamically add placeholders behind the pseudo elements so that you can interact with them instead of trying to access pseudo elements that do not exist in the DOM.
$("head").append("<style id='pseudoElementStyle'></style>");
var setPseudoElementDisplay = function (hover) {
var content = hover ? ' after' : '';
var cssRule = '.text::after { content: "' + content + '"; }';
$('#pseudoElementStyle').text(cssRule);
};
$('.text').prepend('<span class="place-holder before">before </span>');
$('.text').append('<span class="place-holder after"> after</span>');
$('.place-holder').each(function () {
var direction;
var width = $(this).css('width');
direction = $(this).hasClass('before') ? 'left' : 'right';
$(this).css('margin-' + direction, '-' + width);
});
$('.before').mouseover(function () {
setPseudoElementDisplay(true);
}).mouseout(function () {
setPseudoElementDisplay(false);
});
http://jsfiddle.net/jasonjohnson115/2d96N/
As I can have a div with two children inside, one of which is not shown (display: none) and the other occupies the entire space of the father, but when I tell javascript to display the hidden the other autoredimensiones to space left without using javascript?
html:
<div class="parent">
<div class="child1" id="id1">
</div>
<div class="child2">
</div>
</div>
css:
.parent {
height: 200px;
background-color: red;
}
.child2 {
height: 100%;
background-color: blue;
}
.child1 {
display:none;
height: 50px;
background-color: green;
}
javascript:
var myDiv = document.getElementById('id1');
myDiv.style.display="block";
This can't be achieved with pure CSS, but if you're okay about adding a little more JavaScript (in order to add a class-name), then it can be achieved:
Amended JavaScript:
var myDiv = document.getElementById('id1');
myDiv.style.display = "block";
myDiv.className += ' nowShown';
Appended CSS:
.child1.nowShown {
float: left;
width: 50%;
}
.child1.nowShown + .child2 {
display: inline-block;
width: 50%;
}
JS Fiddle proof-of-concept.
Otherwise it's not possible, simply because CSS lacks the capacity to determine the visual/display state of an element. If it had a :visible pseudo-class then it'd be possible, but without such, as currently, it's sadly not.
Adapted the above proof-of-concept to implement a slightly less-than-concise toggle:
function showDiv1() {
var myDiv = document.getElementById('id1'),
cN = myDiv.className;
myDiv.style.display = "block";
if (cN.match(/nowShown/)){
myDiv.className = cN.replace(/nowShown/,'');
myDiv.style.display = 'none';
}
else {
myDiv.className += ' nowShown';
}
nC = myDiv.className;
myDiv.className = nC.replace(/\s{2,}/,' ');
}
document.getElementsByTagName('button')[0].onclick = function(){
showDiv1();
};
JS Fiddle demo.