After it did work at first, I (apparently) changed something in my CSS. After hours of research I still can't figure out why the content of my <span> now won't be displayed on hover anymore...
Can anyone help me, please? Thank you!
This is a snippet of my CSS:
td.matchbool {
text-align: center;
box-shadow: inset 0px 0px 0px 10px #fff;
}
td.matchbool:hover{
background:#e2e236;
width:400px;
}
td.matchbool span{
display: none;
}
td.matchbool:hover span{
z-index: 9999;
width: 300px;
border-left: 5px solid #e2e236;
display: block;
padding: 1px;
}
And the important HTML part:
<table><tr>
<td class='matchbool'>
<span>
Some Content
</span>
</td>
</tr></table>
Note that on hover the background of the <td> does change.
You are hiding the only element in the single row, single column table.
This makes the HTML collapse to save space for other controls in the page.
That does not mean that hover function is gone. It just means that the space taken up by the span will not be "reserved" as if it is invisible.
To make it more simple: if you want the cell to take the same space as it should when hovering over it, then I suggest you re-write your CSS to preserve the size of the cell, even if its content is not visible.
One way to do so is to make the font color white, but that is a lousy way.
I have included a snippet code to convince you that the cell is there, and hover works but you need to know where to point your mouse pointer.
For that, I have added extra padding to the td and made it with a border so you know where to put the cursor. once your mouse is inside the border, the hover functionality will kick in and you will see the span
td.matchbool {
text-align: center;
box-shadow: inset 0px 0px 0px 10px #fff;
padding: 10px;
border: 1px dashed grey;
}
td.matchbool:hover {
background: #e2e236;
width: 400px;
}
td.matchbool span {
display: none;
}
td.matchbool:hover span {
z-index: 9999;
width: 300px;
border-left: 5px solid #e2e236;
display: block;
padding: 1px;
}
<table>
<tr>
<td class='matchbool'>
<span>Some Content</span>
</td>
</tr>
</table>
Your span is on display: none; this means the td has no propper size to hover over it.
Try: visibility: hidden; or opacity: 0; instead of display: none;.
visibility: visible; and opacity: 1 to make it visible.
td.matchbool {
text-align: center;
box-shadow: inset 0px 0px 0px 10px #fff;
}
td.matchbool:hover{
background:#e2e236;
width:400px;
}
td.matchbool span{
visibility: hidden;
}
td.matchbool:hover span{
z-index: 9999;
width: 300px;
border-left: 5px solid #e2e236;
visibility: visible;
padding: 1px;
}
For td.matchbool span and td.matchbool:hover span, use the visibility property instead of display. An invisible element will leave its space for the mouse to interact whereas non-displayed elements cannot be interacted with the mouse at all.
td.matchbool span
{
display: block;
}
remove display:none from it and you will see the content
Related
In the Reveal focus docs its:
But, as the docs
Reveal focus increases the size of the focus visual, which might cause issues with your UI layout. In some cases, you'll want to customize the Reveal focus effect to optimize it for your app.
How would you approach creating the effect that does not affect the UI in the way described above?
My Reveal focus component:
Reveal glow is box-shadow
Primary focus visual is outline
Secondary focus visual is border
Background
but something seems off and I can't quite grasp it. Is it box-shadow, is it spacing (like margin, I don't set any as you can see), or is it yet something else? How would you fix it if you wanted it to look like on the gif below?
body {
background-color: #000;
padding: 5px 100px;
}
.tile {
display: inline-block;
height: 82px;
background-color: #555555;
}
.x1 { width: 19%; }
.x2 { width: 38%; }
.reveal-focus {
border: 1px solid transparent;
outline: 2px solid transparent;
}
.reveal-focus:focus {
outline-color: #61B250;
box-shadow: 0 0 15px 3px #61B250;
}
The shadow is being placed above elements that appear before the focused one, but below elements after it. You need to add position: relative to all the elements, and z-index: 1 to the focused one.
To make sure this doesn't interfere with any other stacking, apply position: relative; z-index: 0 to the container. This ensures that it has its own stacking context.
The GIF you show appears to also have a slight animation effect, with the glow being more intense for just a moment before fading to normal. This can be achieved quite simply with animation.
body {
background-color: #000;
padding: 5px 100px;
}
.tile {
display: inline-block;
height: 82px;
background-color: #555555;
}
.x1 { width: 19%; }
.x2 { width: 38%; }
.reveal-focus {
border: 1px solid transparent;
outline: 2px solid transparent;
position: relative;
}
.reveal-focus:focus {
border-color: #000;
outline-color: #61B250;
box-shadow: 0 0 15px 3px #61B250;
animation: glowfade 0.4s linear;
z-index: 1;
}
#keyframes glowfade {
from {box-shadow: 0 0 30px 6px #61B250;}
to {box-shadow: 0 0 15px 3px #61B250;}
}
Adjust values as desired.
I'm stuck with the following code:
<h1>
Registrer faktura
<span class="helpToggle" style="cursor:pointer;" title="Vis hjelpetekst"> Hjelp</span>
</h1>
//CSS
h1 .helpToggle {
display: inline-block;
width: 40px;
text-indent: 20px;
border: solid 1px red;
overflow: hidden;
}
h1 .helpToggle:after {
content: '?';
display: inline-block;
height: 32px;
width: 32px;
border: solid 1px green;
}
I'm not happy about having a <span> tag inside the H1 tag, but according to HTML5, this is now ok - and I'm not able to edit the HTML code (just the styling).
My goal is to replace the help text inside the span tag with a question mark. But for some reason the ? is placed inside the span.
I can't figure out why this is happening and I was hoping some one else can see what is happening.
See my fiddle here.
You could use visibility in combination with ::before pseudo-element instead of ::after.
Demo: http://jsfiddle.net/abhitalks/E98SE/9/
CSS:
h1 .helpToggle {
border: solid 1px red;
position: absolute;
visibility: hidden;
}
h1 .helpToggle::before {
content:'?';
visibility: visible;
border: solid 1px green;
}
The visibility: hidden; will leave the space occupied by the element as-is, hence we use the ::before pseudo-element to ensure that the ? is displayed before the occupied space. Making it absolutely positioned will take it out of the flow.
You want to replace the word Help with a question mark? Then :after actually is not the thing, it will place the question mark AFTER the element.
BUT you can hide the span and make the :after Element visible:
h1 .helpToggle {
visibility: hidden;
text-indent: 20px;
border: solid 1px red;
overflow: hidden;
font-size: 0px;
}
h1 .helpToggle:after {
visibility: visible;
content: '?';
border: solid 1px green;
font-size: 24pt;
}
Live demo: http://jsfiddle.net/w5B4Z/
I apologize if someone can immediately direct me to the right place, but I'm unsure what to even search for this particular problem. It seems to be a Chrome-specific bug, but I'm unsure how to fix it.
What's happening is that when I replace the text in a span, it's moving a (grand)parent anchor to the left. (see fiddle for demo : http://jsfiddle.net/Sj3Gj/2/) I've simplified the HTML, but for various reasons, this is the structure/CSS I need. If you put float: left on the anchor element, it works fine, but I have this structure in a larger and this additional float breaks the positioning of the larger structure.
I'm at a complete loss here. If you look at the fiddle in chrome, the anchor floats left, but in Firefox/IE, it's fine. Any ideas?
Here's my code:
<a class="trigger">
<div></div>
<span>Some text</span>
</a>
a.trigger {
width: 337px;
height: 16px;
padding: 2px 20px 2px 5px;
margin-top: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
a.trigger, a.trigger:link, a.trigger:visited {
display: inline-block;
border: 1px solid;
border-top-color: #BFD6F1;
border-left-color: #BFD6F1;
border-bottom-color: #9EBCE1;
border-right-color: #9EBCE1;
padding: 2px 18px 2px 7px;
background-color: #FFF;
text-decoration: none;
cursor: pointer;
}
div{
background-image: url('http://placekitten.com/200/300');
height: 16px;
width: 16px;
display: inline-block;
float: left;
}
a.trigger span {
margin-left: 10px;
}
a.trigger, a.trigger:link, a.trigger:visited {
cursor: pointer;
}
This is sbecause you are floating the div to the left. remove the float, it is not needed as you have already declared inline-block
DEMO http://jsfiddle.net/kevinPHPkevin/Sj3Gj/5/
div{
background-image: url('http://placekitten.com/200/300');
height: 16px;
width: 16px;
display: inline-block;
}
I am having trouble with the combination of the CSS selector :nth-child(...) and the box-shadow effect. The desired effect is as follows:
Even-numbered div elements in a container are given an alternating background color.
When the user hovers over one of the div elements, a box shadow is applied, giving the appearance of the "hovered" div "hovering" above the following div.
However, I am running into a problem. While the box shadow is applied to the "hovered" element, the effect is different for even-numbered div elements as opposed to odd-numbered ones. Essentially, the shadow of each even div overlaps the following odd div, while the shadow of each odd div is rendered behind the following even div.
This pen demonstrates the issue better: http://codepen.io/jtlovetteiii/pen/cEaLK
Here is the HTML snippet:
<div class="rows">
<div class="row"></div>
<div class="row"></div>
...
</div>
Here is the CSS:
.rows
{
background-color: #AAAAAA;
}
.rows .row:nth-child(even)
{
background-color: #E2E2E2;
}
.row
{
height: 20px;
cursor: pointer;
}
.row:hover
{
box-shadow: 0px 10px 10px #888888;
}
What am I missing?
The reason this is happening is because only your nth-child(even) divs have a background color. While it appears that the hover shadow is overlapping the other div, it really isn’t – it’s overlapping the parent’s background color.
You can fix the issue with a combination of position: relative and z-index:
.rows {
position: relative;
}
.row
{
position: relative;
height: 20px;
cursor: pointer;
background-color: #CCCCCC;
}
.row:nth-child(even)
{
background-color: #E2E2E2;
}
.row:hover
{
box-shadow: 0px 10px 10px #888888;
z-index: 100;
}
CodePen demo
Interesting. Not sure why that is happening, but I found a workaround. By adding a position: relative to the :hover elements, the hover effect is more consistent:
http://codepen.io/anon/pen/hsKEf
.rows
{
background-color: #AAAAAA;
}
.rows .row:nth-child(even)
{
background-color: #E2E2E2;
}
.row
{
height: 20px;
cursor: pointer;
}
.row:hover
{
box-shadow: 0px 10px 10px #888888;
position: relative;
}
It still doesn't look quite right, but maybe a margin offset would cause it to look a bit better.
JSFiddle
.row
{
height: 20px;
cursor: pointer;
position:relative;
z-index:1;
}
.row:hover
{
box-shadow: 0px 10px 10px #888888;
z-index:2;
}
I'm having some problems with anchor and image tags. My image tags are sitting inside (what is essentially) a div tag each, the div tags have constant height and width values. The image tags are given a constant height value, so their width can be calculated based on their aspect ratio and the images do not become distorted when they're resized to fit inside the div.
I want to have an anchor tag surrounding each image for two reasons. (1.) So the images can act as links, but also (2.) so that when the user hovers over the image, I can display an overlay on top of the image.
Putting the image tag inside an anchor tag solves the problem of the link, but as for the second problem, I'm stumped. I need the anchor tag to dynamically size and position itself over its respective image tag. Ideally I'd like to avoid using JavaScript to solve the problem and just stick to CSS (if possible). I have no objection to adding a little extra markup if needs be.
Relevant HTML:
<listitem>
<img src="../images/image1.jpg"/>
</listitem>
<!--More listitems with different sized images go here-->
And the CSS:
#pictureListContainer listitem {
position: relative;
background-color: rgba(0,0,0,0.5);
display: block;
height: 257px;
width: 636px;
}
#pictureListContainer listitem img {
position: relative;
float: right;
height: 203px !important;
vertical-align: middle;
margin: 21px 296px 21px auto;
border: 6px solid white;
border-radius: 6px;
box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
}
Thanks in advance.
Update: I should maybe make it clear that I would like the overlay to have the same dimensions as the image, so that it only overlays the image.
It can be done using only CSS and HTML: JSFiddle
HTML
<div class="listitem">
<a href="#">
<img src="http://sublantic.net/forge/demos/img/code_canyon/scale.png" alt="image" />
<span class="overlay-text">Test</span>
</a>
</div>
CSS
.listitem {
position: relative;
background-color: rgba(0,0,0,0.5);
display: block;
height: 257px;
width: 636px;
overflow: hidden;
}
.listitem img {
position: relative;
float: right;
height: 203px !important;
vertical-align: middle;
margin: 21px 296px 21px auto;
border: 6px solid white;
border-radius: 6px;
box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
position: relative;
}
.listitem a span {
display: none;
position: absolute;
bottom: 10px;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
padding: 10px;
color: #FFF;
}
.listitem a:hover span {
display: block;
}
Edit: Overlay fits to image
JSFiddle
CSS
.listitem {
position: relative;
background-color: rgba(0,0,0,0.5);
display: block;
height: 257px;
width: 636px;
}
.listitem img {
border: 6px solid white;
border-radius: 6px;
box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
}
.listitem a {
position: relative;
overflow: hidden;
display: inline-block;
}
.listitem a span {
display: none;
position: absolute;
bottom: 10px;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
padding: 10px;
color: #FFF;
}
.listitem a:hover span {
display: block;
}
You can use an onClick for the image
<img src="" onClick="" />
This will eliminate the botheration of generating functionality like overlay, etc for a tag and you can get both effects work simultaneously well.
Hope this helps.