I am working on a website where one of the sessions has a click effect. Basically the text body is hidden and when clicking on it expands showing the hidden text as you can see in the image:
Before Click
After Click
In CSS, basically the text element has a height of 30px and after: hover it has 300px.
.portfolio_text{
height:30px;
}
#ho_nf:hover .portfolio_text {
height: 200px;
padding: 20px 14px;
overflow: visible;
}
Portfolio_text returns to normal height if I click outside the element's Div or click on another element in the list of 6.
What I need is to be able to return the text to the size of 30 by clicking on the close icon that I added in the left corner to see the background image again.
I tried with JQuery but it didn't work and I need it only on mobile because the Desktop is based on: hover and removing the mouse it goes back to the normal state.
There is no :hover pseudo-element for mobile since there is no cursor.
Try using :active.
Related
I am trying to include an image and some text inside a button element. My code is as follows:
<button class="testButton1"><img src="Car Blue.png" alt="">Car</button>
The CSS is:
.testButton1
{
font-size:100%;
height:10%;
width: 25%
}
.testButton1 img
{
height:80%;
vertical-align:middle;
}
What I would like to do is to position the image to the left edge of the button, and position the text either in the center or to the right. Using   works, but is perhaps a bit crude. I have tried to surround the image and text with spans or divs and then positioning those, but that seems to mess things up.
What appears to be happening is that anything inside the button tag (unless formatted) is positioned as one unit in the center of a wider button (not noticeable if button width is left to auto adjust as both items are side-by-side.
Any help, as always, is appreciated. Thank you.
Background Image Approach
You can use a background image and have full control over the image positioning.
Working example: http://jsfiddle.net/EFsU8/
BUTTON {
padding: 8px 8px 8px 32px;
font-family: Arial, Verdana;
background: #f0f0f0 url([url or base 64 data]);
background-position: 8px 8px;
background-repeat: no-repeat;
}
A slightly "prettier" example: http://jsfiddle.net/kLXaj/1/
And another example showing adjustments to the button based on the :hover and :active states.
Child Element Approach
The previous example would work with an INPUT[type="button"] as well as BUTTON. The BUTTON tag is allowed to contain markup and is intended for situations which require greater flexibility. After re-reading the original question, here are several more examples: http://jsfiddle.net/kLXaj/5/
This approach automatically repositions image/text based on the size of the button and provides more control over the internal layout of the button.
Change button display style to inline-block, img float to left. Add margin to img as necessary.
<button style="display:inline-block">
<img src="url" style="float:left;margin-right:0.5em">Caption
</button>
If you want to use image inside the button not in the CSS I think this help you:
http://jsfiddle.net/FaNpG/1/
Adding float left to the image works to an extent. A judicious use of padding and image sizing fixes the issue with having the text stuck to the top of the button. See this jsFiddle.
I created a little site tonight about watches. You can visit it at horology dot info.
(Please do not post the actual URL of my site in your response.)
I was wondering why the dropdown menu -- which I got from https://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ -- appears in id="content" rather than id="banner" (with the blue background). I want the menu to appear underneath the logo text with the blue background. Additionally, does anyone know why there is a lot of vertical space before the banner? I also want less empty vertical space at the top. By the way, I am using Firefox on Ubuntu Linux.
Add display property (display: inline-block;) to your #banner class in "/horology.css"
#banner {
width: 800px;
background-color: #00C;
display: inline-block;
}
I've tried using the scenario in the link below too show hidden text when mouse over text. It works fine with text but what my client is needing is to hide the webbot HitCounter and show it when they place the mouse over. Any help would be greatly appreciated.
Show hidden text on hover (CSS)
<div id="DivForHoverItem">
<div id="HiddenText"><p class="auto-style4">
<!--webbot bot="HitCounter" i-image="0" I-ResetValue="0" I-Digits="0" U-Custom --></p></div>
</div>
</div>
CSS Code:
/* Div for hover item */
#DivForHoverItem {
height: 50px;
width: 300px;
background-color: black;
text-align:center;
}
#HiddenText {
display:none;
}
#DivForHoverItem:hover #HiddenText {
display:block;
}
Remember that display:none "removes" element (div do not occupy space) from layout. So You have nothing to point with cursor (without creating another wrapping div/divs with fixed size, or gettinng into js and conditions of another element) to start the hover effect.
So maybe outer wrapper div?
Maybe visibility: hidden in place display:none?
Maybe Changing the Z-Index?
Or another div on top of counter (covering it with background solid color) with alpha transparency change on hover (even fading out css animation) ?
I have a div that I want to appear when hovering over a certain area on an image. The hover effect works fine and the div appears when the hit area is hovered over, but there are two problems I am encountering.
The div that appears needs to be in a specific position overlaying the background image, but this means that it blocks part of the hit area. The portion of the hit area that is blocked by the appearing div no longer triggers the hover effect because of this, even when it is not visible. There is no way to reposition or resize the appearing div so the hit area is unblocked because they need to correspond to specific areas. How can I make sure the entire hit area triggers the hover effect while maintaining the position of the appearing div?
The div that appears holds a call to action button that users need to be able to click on once they see the div appear. However, the appearing div disappears when the user moves to click on the button. Is there a way that I can make the div remain visible long enough so the user can click the button?
I would like to accomplish this using CSS, but if JS is necessary, that's cool.
I created this fiddle as a rough idea of what the problem is. As you can see, all three of the red boxes should trigger the hover effect, but only the last one actually does because the div that appears on hover blocks them. The button would appear within the blue box, but the box disappears as soon as the mouse leaves the hit area.
I'm using opacity to show and hide the div because our site has transitions that would allow this to fade in and out. The code is simplified and stripped down, but illustrates the idea.
HTML:
<a class="hover-grid hit-area">
</a>
<a class="hover-grid hit-area">
</a>
<a class="hover-grid hit-area">
</a>
<div class="details">
</div>
CSS:
.hover-grid
{
background-color: red;
opacity: 0.25;
width:100px;
height:100px;
display: block;
float:left;
}
.details
{
opacity: 0;
background-color:blue;
width:200px;
height:150px;
position: relative;
z-index: 2;
}
.hit-area:hover ~ .details
{
opacity:1;
}
Just apply the hover effect to .detail as well. And instead of opacity use display:none, to not trigger the hover state on the invisible element.
http://jsfiddle.net/me2loveit2/3shj2omg/3/
.details
{
display:none;
background-color:blue;
width:200px;
height:150px;
position: relative;
z-index: 2;
}
.hit-area:hover ~ .details
{
display:block;
}
.details:hover
{
display:block;
}
I have a div with a defined height and overflow set to hidden. If there are anchors in the overflow content the visible content of the div will shift up, meaning the content that I want to show will be pushed off the top of the div and the anchor will move to the center of the visible portion of the div. No scrollbars are shown (a good thing) so the content is kind of stuck there.
HTML
<div class="container">
<div class="show-content">Click in the box and hit tab</div>
<div class="overflow-content">
Pesky Link
Pesky Link 2
</div>
</div>
CSS
.container{
height: 100px;
overflow: hidden;
border: 1px solid black;
}
.show-content{
line-height: 100px;
height: 100px;
font-size: 16px;
}
.overflow-content a{
display: block;
margin-top: 40px;
line-height: 20px;
font-size: 16px;
}
Here is the fiddle. Click inside the box and hit tab to see what I mean
http://jsfiddle.net/2seLJ/1/
My use case for this is that I have a dropdown menu with links that I only want to show on when the user clicks 'show dropdown'. The visible content has an input box so if the user tabs from the input box the links are shown and there is no way to get back to the input box short of tabbing through the entire page. Can this only be solved by adding tabindex="-1" to all the links?
Alternative Solution
When this happens, the parent element that has overflow: hidden applied will scroll to put the focused element in view, and the scrollTop and/or scrollLeft properties become a positive integer, despite the fact that there is no scrollbar.
One way around this issue, that involves no extra markup or DOM manipulation, would be to have an event listener that resets the scroll position of the overflow: hidden parent back to 0.
jQuery Example:
$(document).on('focus', '.some-overflow-hidden-element > *', function() {
$(this).closest('.some-overflow-hidden-element').scrollTop(0).scrollLeft(0);
});
NOTE: If you are going to do this, make sure you are not destroying your accessibility in the process. This is not usually the best option, as the hidden elements can still be focused by things like tab.
It sounds like you want to prevent the tabstop behavior on that anchor. See this: Prevent tabstop on A element (anchor link) in HTML
<div class="container">
<div class="show-content">Click in the box and hit tab</div>
<div class="overflow-content">
Pesky Link
Pesky Link 2
</div>
</div>
Fiddle: http://jsfiddle.net/2seLJ/2/
Alternatively
You can use jQuery to do this programatically for all links inside "overflow-content" divs:
$(document).ready(function(){
$('div.overflow-content a').attr('tabindex', '-1');
});
Fiddle: http://jsfiddle.net/2seLJ/3/