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) ?
Related
I want to display scrollbar while the mouse hover the container, if the contents inside the container overflows the container.
The below code works good in chrome but doesn't work in firefox, because it doesn't suppport overlay property.
<style type="text/css">
.container {
overflow:hidden;
}
.container:hover {
overflow:overlay;
}
</style>
<div class="container">
contents
</div>
I tried using overflow:auto on hover but it changes the alignment of text inside the container while mouse hovers.
Is there any way to achive my need in all browsers?
Add scrollbar-gutter:stable to .container and this should do the trick. More info here and here.
Hello I am trying to make an invisible button (still functional and clickable), because my buttons styles are embedded in the background and I don't want to slice them, and do it all from beginning.
So I just want to make a button, put it on the part of the background where the button should be and make it invisible so the background button image can be seen and clicked.
Any suggestions? Thank you very much!
you must use the following properties for a button element to make it transparent.
Transparent Button With No Text
button {
background: transparent;
border: none !important;
font-size:0;
}
Transparent Button With Visible Text
button {
background: transparent;
border: none !important;
}
and use absolute position to position the element.
For Example
you have the button element under a div. Use position : relative on div and position: absolute on the button to position it within the div.
here is a working JSFiddle
here is an updated JSFiddle that displays only text from the button.
You can use CSS to hide the button.
button {
visibility: hidden;
}
If your <button> is just a clickable area on the image, why bother make it a button? You can use <map> element instead.
button {
background:transparent;
border:none;
outline:none;
display:block;
height:200px;
width:200px;
cursor:pointer;
}
Give the height and width with respect to the image in the background.This removes the borders and color of a button.You might also need to position it absolute so you can correctly place it where you need.I cant help you further without posting you code
To make it truly invisible you have to set outline:none; otherwise there would be a blue outline in some browsers and you have to set display:block if you need to click it and set dimensions to it
HTML
<input type="button">
CSS
input[type=button]{
background:transparent;
border:0;
}
Use CSS background:transparent; to your button/div.
JSFiddle
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;
}
JFIDDLE DEMO
As you can see on the jsfiddle link, I have a button with tooltip display on mouse hover. The problem is that tooltip area isn't overlaying the parent div and will display only inside the div.
I know that if I remove .panel-heading {
overflow:hidden;
} this will work but I need this css to stay for some of the responsive issues. I have tried adding .toolt {
overflow:visible;
} to tooltip div but it won't work.
You can change container of tooltip
$('.toolt span').tooltip({container:'body'});
Hello I am trying to make an invisible button (still functional and clickable), because my buttons styles are embedded in the background and I don't want to slice them, and do it all from beginning.
So I just want to make a button, put it on the part of the background where the button should be and make it invisible so the background button image can be seen and clicked.
Any suggestions? Thank you very much!
you must use the following properties for a button element to make it transparent.
Transparent Button With No Text
button {
background: transparent;
border: none !important;
font-size:0;
}
Transparent Button With Visible Text
button {
background: transparent;
border: none !important;
}
and use absolute position to position the element.
For Example
you have the button element under a div. Use position : relative on div and position: absolute on the button to position it within the div.
here is a working JSFiddle
here is an updated JSFiddle that displays only text from the button.
You can use CSS to hide the button.
button {
visibility: hidden;
}
If your <button> is just a clickable area on the image, why bother make it a button? You can use <map> element instead.
button {
background:transparent;
border:none;
outline:none;
display:block;
height:200px;
width:200px;
cursor:pointer;
}
Give the height and width with respect to the image in the background.This removes the borders and color of a button.You might also need to position it absolute so you can correctly place it where you need.I cant help you further without posting you code
To make it truly invisible you have to set outline:none; otherwise there would be a blue outline in some browsers and you have to set display:block if you need to click it and set dimensions to it
HTML
<input type="button">
CSS
input[type=button]{
background:transparent;
border:0;
}
Use CSS background:transparent; to your button/div.
JSFiddle