CSS: .table-responsive class messes up tooltip's content [fiddle provided] [closed] - html

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I've got this problem - after adding .table-responsive class the table header tooltips got lost overflow-x: auto - Setting it off makes it alright but disables the responsivness of the table.
I've created code snippet to show you
https://jsfiddle.net/kristjanrei/74aa8x6u/
Default code for tooltip
.container {
padding: 200px;
}
.custom-tooltip-hover {
position: relative;
}
.custom-tooltip { /* hide and position tooltip */
position: absolute;
bottom: 100%;
left: 0px;
background-color: #000;
color: #fff;
line-height: initial;
visibility: hidden;
border: 1px solid #fff;
text-align: left;
padding-left: 8px;
padding-right: 8px;
padding-top: 4px;
padding-bottom: 4px;
margin-bottom: 4px;
z-index: 110;
transition-delay: 0.33s;
font-size: 13px;
font-weight: initial;
word-break: inherit;
font-size: 12px;
white-space: normal;
}
.custom-tooltip.left {
left: initial;
right: 0px;
}
.custom-tooltip:after {
content: '';
position: absolute;
top: 100%;
left: 12%;
width: 0; height: 0;
border-top: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.custom-tooltip.left:after {
left: initial;
right: 12%;
}
.custom-tooltip-hover:hover .custom-tooltip {
visibility: visible;
display: inline;
transition-delay: 0.88s;
-webkit-transition-delay: 0.88s; /* Safari */
}
.break-tooltip {
word-break: break-all;
}
A snippet from jsfiddle of a broken tooltip.
Way it works every where else

I have added this on the div panel and it has worked style="overflow:visible;
.container {
padding: 200px;
}
.custom-tooltip-hover {
position: relative;
}
.custom-tooltip { /* hide and position tooltip */
position: absolute;
bottom: 100%;
left: 0px;
background-color: #000;
color: #fff;
line-height: initial;
visibility: hidden;
border: 1px solid #fff;
text-align: left;
padding-left: 8px;
padding-right: 8px;
padding-top: 4px;
padding-bottom: 4px;
margin-bottom: 4px;
z-index: 11000000;
transition-delay: 0.33s;
font-size: 13px;
font-weight: initial;
word-break: inherit;
font-size: 12px;
white-space: normal;
}
.custom-tooltip.left {
left: initial;
right: 0px;
}
.custom-tooltip:after {
content: '';
position: absolute;
top: 100%;
left: 12%;
width: 0; height: 0;
border-top: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
.custom-tooltip.left:after {
left: initial;
right: 12%;
}
.custom-tooltip-hover:hover .custom-tooltip {
visibility: visible;
display: inline;
transition-delay: 0.88s;
-webkit-transition-delay: 0.88s; /* Safari */
}
.break-tooltip {
word-break: break-all;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="custom-tooltip-hover">
<div>
Working header
</div>
<span class="custom-tooltip">
Tooltip for head
</span>
</div>
<div class="panel panel-default">
<div class="panel-body table-responsive" style="overflow:visible;">
<table class="table-hover">
<thead>
<tr>
<th>
<div class="custom-tooltip-hover">
<div>
Broken Header
</div>
<span class="custom-tooltip">
Tooltip for head
</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td> Content for head</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

If you want to hide some part of content with overflow, then you are able to use position:fixed for the .custom-tooltip class and place it with js.
Checkout the library tether (bootstrap also use it for tooltips), there are a lot of options, to attache the element to another element. I think it'll be much easier.

Related

Hover on child without changing parent

Hover on child element <button> without hover effect on parent <h2>
.parent {
display: block;
text-align: center;
font-weight: 700;
font-size: 31px;
letter-spacing: normal;
position: relative;
}
.parent:hover {
color: orange;
}
span {
line-height: unset;
vertical-align: baseline;
top: 0;
left: 0;
position: absolute;
color: transparent;
box-shadow: none;
z-index: 5;
}
span button {
position: absolute;
left: 0;
top: -20px;
color: #fff;
width: 30px;
height: 30px;
min-width: 30px;
min-height: 30px;
z-index: 5;
background: #0085ba !important;
border-radius: 50%;
border: 2px solid #fff;
box-sizing: border-box;
padding: 3px;
display: inline-block;
overflow: hidden;
}
<h2 class="parent">
Title
<span class="child">
<button>+</button>
</span>
</h2>
This can be helpful
example
.html
<div class="parent1">
<div class="child1">
/*.....*/
.css
.parent1:hover{
cursor: pointer;
}
.parent1:hover .child1{
/*......*/
}
snippet
.parent:hover .child {
/* ... */
}
Add the below:
parent:hover {
cursor:pointer
}
It's a little tricky.
First you need to get the parent from the child :
const _parent = document.querySelector('selectorOfParentFromChild')
After you have to add the class on child and remove on parent. You need to do it one child event : 'onMouseOver'.
SO:
[child, parent].forEach(node=>node.addEvenListener('onmouseover', (event)=>{
event.stopPropagation();
const _parent = document.querySelector('selectorOfParentFromChild')
node.classlist.add(wanted)
_parent.classlist.remove(wanted)
})
This has been asked before, and answers seem to come within the span of: "css can't do that", "you should probably restructure your divs" and "here's a trick".
hover on child without hover effect on parent
Now I don't have the experience to say if a structure that neccesitates this is actually bad, but in either case, there is now a straight-forward solution with :has()
.parent {
display: block;
text-align: center;
font-weight: 700;
font-size: 31px;
letter-spacing: normal;
position: relative;
}
.parent:not(:has(.child:hover)):hover {
color: orange;
}
span {
line-height: unset;
vertical-align: baseline;
top: 0;
left: 0;
position: absolute;
color: transparent;
box-shadow: none;
z-index: 5;
}
span button {
position: absolute;
left: 0;
top: -20px;
color: #fff;
width: 30px;
height: 30px;
min-width: 30px;
min-height: 30px;
z-index: 5;
background: #0085ba !important;
border-radius: 50%;
border: 2px solid #fff;
box-sizing: border-box;
padding: 3px;
display: inline-block;
overflow: hidden;
}
<h2 class="parent">
Title
<span class="child">
<button>+</button>
</span>
</h2>
This is what that selector is saying in English:
Select all elements ".parent" - except the ones who have any child elements ".child" being hovered on - when they are hovered on.
You will have to delete the CSS for parent:hover and if you only want the hover effect on the button then the parent shouldn't have a hover effect in your CSS.
.parent {
display: block;
text-align: center;
font-weight: 700;
font-size: 31px;
letter-spacing: normal;
position: relative;
}
span {
line-height: unset;
vertical-align: baseline;
top: 0;
left: 0;
position: absolute;
color: transparent;
box-shadow: none;
z-index: 5;
}
span button {
position: absolute;
left: 0;
top: -20px;
color: #fff;
width: 30px;
height: 30px;
min-width: 30px;
min-height: 30px;
z-index: 5;
background: #0085ba !important;
border-radius: 50%;
border: 2px solid #fff;
box-sizing: border-box;
padding: 3px;
display: inline-block;
overflow: hidden;
}
button:hover {
color: orange;
}

Custom select box

I am trying to style a select drop down box. The custom select box has rounded corners and a dropdown list (a box that drops down with the options) that shows on focus. I used the css below to style the select box. I have also substituted the html select with DIV elements.
Here is the code I have used so far:
document.querySelector('.custom-select-wrapper').addEventListener('click', function() {
this.querySelector('.custom-select').classList.toggle('open');
for (const option of document.querySelectorAll(".custom-option")) {
option.addEventListener('click', function() {
if (!this.classList.contains('selected')) {
this.parentNode.querySelector('.custom-option.selected').classList.remove('selected');
this.classList.add('selected');
this.closest('.custom-select').querySelector('.custom-select__trigger span').textContent = this.textContent;
}
})
}
})
.custom-select-wrapper {
position: relative;
user-select: none;
width: 188px;
z-index: 30000000000;
}
.custom-select {
position: relative;
display: flex;
flex-direction: column;
}
.custom-select__trigger {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
height: 27px;
background: #ffffff;
cursor: pointer;
border: 1px solid #707070;
border-radius: 8px;
}
.custom-options {
position: absolute;
display: block;
top: 100%;
left: 0;
right: 0;
border: 1px solid #707070;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
background: #fff;
transition: all 0.5s;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 2;
}
.custom-select.open .custom-options {
opacity: 1;
visibility: visible;
pointer-events: all;
}
.custom-option {
position: relative;
display: block;
padding: 0 10px 0 10px;
line-height: 25px;
cursor: pointer;
transition: all 0.5s;
}
.arrow {
position: relative;
top: 15px;
right: 15px;
}
.arrow::before,
.arrow::after {
content: "\f0d7";
font-family: "Font Awesome 5 Free";
font-size: 20px;
font-weight: 700;
color: #394a6d;
position: absolute;
bottom: 0px;
}
<div class="custom-select-wrapper">
<div class="custom-select">
<div class="custom-select__trigger">
<span>Option 1</span>
<div class="arrow"></div>
</div>
<div class="custom-options">
<span class="custom-option selected" data-value="tesla">Option 2</span>
<span class="custom-option" data-value="volvo">Option 3</span>
</div>
</div>
</div>
The styles I have applied to the select tag are coming into effect, but the problem is that the dropdown box top border does not blend with the select box itself on focus. Is it only possible to change the SELECT input style on focus from a round border to a square border?
Would someone with some more knowledge in this regard please take a few minutes to suggest a solution?
It depends on what you mean by "blending", but if you want to achieve a more harmonious look, you can do the following:
Set the border-bottom-left-radius and border-bottom-right-radius of the trigger element to 0px when the dropdown is open, so that the select trigger visually continues to the dropdown that is visible
Remove the top border of the dropdown, so that you don't have a doubly-thick border separating the trigger and the dropdown
See proof-of-concept below:
document.querySelector('.custom-select-wrapper').addEventListener('click', function() {
this.querySelector('.custom-select').classList.toggle('open');
for (const option of document.querySelectorAll(".custom-option")) {
option.addEventListener('click', function() {
if (!this.classList.contains('selected')) {
this.parentNode.querySelector('.custom-option.selected').classList.remove('selected');
this.classList.add('selected');
this.closest('.custom-select').querySelector('.custom-select__trigger span').textContent = this.textContent;
}
})
}
})
.custom-select-wrapper {
position: relative;
user-select: none;
width: 188px;
z-index: 30000000000;
}
.custom-select {
position: relative;
display: flex;
flex-direction: column;
}
.custom-select__trigger {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
height: 27px;
background: #ffffff;
cursor: pointer;
border: 1px solid #707070;
border-radius: 8px;
transition: all 0.5s;
}
.custom-options {
position: absolute;
display: block;
top: 100%;
left: 0;
right: 0;
border: 1px solid #707070;
border-top: none;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
background: #fff;
transition: all 0.5s;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 2;
}
.custom-select.open .custom-select__trigger {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.custom-select.open .custom-options {
opacity: 1;
visibility: visible;
pointer-events: all;
}
.custom-option {
position: relative;
display: block;
padding: 0 10px 0 10px;
line-height: 25px;
cursor: pointer;
transition: all 0.5s;
}
.arrow {
position: relative;
top: 15px;
right: 15px;
}
.arrow::before,
.arrow::after {
content: "\f0d7";
font-family: "Font Awesome 5 Free";
font-size: 20px;
font-weight: 700;
color: #394a6d;
position: absolute;
bottom: 0px;
}
<div class="custom-select-wrapper">
<div class="custom-select">
<div class="custom-select__trigger">
<span>Option 1</span>
<div class="arrow"></div>
</div>
<div class="custom-options">
<span class="custom-option selected" data-value="tesla">Option 2</span>
<span class="custom-option" data-value="volvo">Option 3</span>
</div>
</div>
</div>
The above code is a solution strictly from a styling point of view. But as per #CBroe remarks, from a usability point of view (for example using the select via keyboard is impossible), the code is not optimal.
This is why I came up with a solution that uses the jQuery plugin Select2
If anyone is interested here is a link to the code
https://www.codeply.com/p/Z999PpuSOK

How to display a captcha image in a different z-index layer without affecting the underlaying layer?

I have a CSS layout, with a tooltip. I have links on the page, and when visitor hover over the links, images appear in tooltips. SOmetimes there is only one image in the tooltip, sometimes two images, and even three.
My code looks like:https://jsfiddle.net/vehpw5zn/ (I suggest viewing on jsfiddle, as the builtin code snippet dispays the tooltip only when scrolling with the mouse.)
body {
margin: 64px 10px;
}
table.thumbnails {
border-spacing: 0px;
border-collapse: collapse;
}
table.thumbnails td {
padding: 0px;
margin: 0px;
text-align: left;
}
.tooltiptext img {
border: 1px solid black;
display: inline-block;
padding: 0px;
margin: 0px;
float: left;
}
.tooltip {
position: relative;
display: inline-block;
text-decoration: none;
}
.tooltip .tooltiptext {
display: none;
background-color: rgba(76, 175, 80, 0.5);
color: #fff;
text-align: center;
padding: 10px;
border-radius: 6px;
font-family: 'Courier';
font-size: 12px;
position: absolute;
z-index: 1;
bottom: -300px;
left: 100%;
margin-left: 10px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
display: table;
}
/**to display a small triangle*/
.tooltip .tooltiptext::before {
content: "";
position: absolute;
top: 55px;
left: -5px;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent rgba(76, 175, 80, 0.5) transparent transparent;
}
<a href="#" class="tooltip">
<div class=tooltiptext>
<table class="thumbnails">
<tr>
<td><img src="https://i.imgur.com/NdLpRzU.png" loading="lazy"></td>
<td><img src="https://i.imgur.com/UmyTAgY.png" loading="lazy"></td>
</tr>
</table>
</div>
Link text
</a>
It basically works, but I have a small gap between the two images.
My other problem, is that when I try to display a small captcha image in the tooltip on top of the content, in a different z-index layer, then the height of the small captcha image appears in the previous layer div, and the green part of the div becomes larger. I get a larger margin below the two brown images, which is transparent green. How can I avoid that?
My code for this second phase: https://jsfiddle.net/vehpw5zn/1/
body {
margin: 64px 10px;
}
table.thumbnails {
border-spacing: 0px;
border-collapse: collapse;
}
table.thumbnails td {
padding: 0px;
margin: 0px;
text-align: left;
}
.tooltiptext img {
border: 1px solid black;
display: inline-block;
padding: 0px;
margin: 0px;
float: left;
}
.tooltip {
position: relative;
display: inline-block;
text-decoration: none;
}
.tooltip .tooltiptext {
display: none;
background-color: rgba(76, 175, 80, 0.5);
color: #fff;
text-align: center;
padding: 10px;
border-radius: 6px;
font-family: 'Courier';
font-size: 12px;
position: absolute;
z-index: 1;
bottom: -300px;
left: 100%;
margin-left: 10px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
display: table;
}
/**to display a small triangle*/
.tooltip .tooltiptext::before {
content: "";
position: absolute;
top: 55px;
left: -5px;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent rgba(76, 175, 80, 0.5) transparent transparent;
}
img.captcha {
display:none;
border:1px solid black;
position: relative;
top:-46px;
left:4px;
z-index:3;
}
.tooltip:hover img.captcha {
display: block;
}
<a href="#" class="tooltip">
<div class=tooltiptext>
<table class="thumbnails">
<tr>
<td><img src="https://i.imgur.com/NdLpRzU.png" loading="lazy"></td>
<td><img src="https://i.imgur.com/UmyTAgY.png" loading="lazy"></td>
</tr>
</table>
<img class="captcha" src="data:image/gif;base64,R0lGODlhlgAoAPABAAAAAP///yH5BAAAAAAAIf8LSW1hZ2VNYWdpY2sOZ2FtbWE9MC40NTQ1NDUALAAAAACWACgAAAL+jI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTCPAXefVDXy8DpT8OsMgDxe0ITlLXbGY9PWMzQA0imVOE9esd1c1dLXH8sO8QdfG4/RW3OaGMXFXe55W1JVvzZ51h5fR93dQGHHoFhfYJ5KYeCbo8TR3tABpAYnZsElxhWfJ1wiiKelp6qYHWobTKYQqN3rh+qoqa4VGG3nLCYvoOxuGCZxJDMd7iuzHqvarTCcMoctXMn1M0qVsfY1tzLBteynt/U3++mx4ab7biAoOXu6p3s38Z81MP1G1jgLff4jPi79/Ab84M2iLX5KBCI0YQtcwIpeHEivqC2Uxo8YJjRw7evwI0kIBADs=">
</div>
Link text
</a>
For your second issue, need to modify the position of the captcha image. The position property changed from relative to absolute, then align with bottom property instead of top property. left property changed from 4px to 15px. The value of bottom property and top property can be changed according to your need.
img.captcha {
display: none;
border: 1px solid black;
position: absolute; /* Change from relative to absolute */
bottom: 15px; /* Change from top:-46px; */
left: 15px; /* Change from 4px */
z-index: 3;
}
body {
margin: 64px 10px;
}
table.thumbnails {
border-spacing: 0px;
border-collapse: collapse;
}
table.thumbnails td {
padding: 0px;
margin: 0px;
text-align: left;
}
.tooltiptext img {
border: 1px solid black;
display: inline-block;
padding: 0px;
margin: 0px;
float: left;
}
.tooltip {
position: relative;
display: inline-block;
text-decoration: none;
}
.tooltip .tooltiptext {
display: none;
background-color: rgba(76, 175, 80, 0.5);
color: #fff;
text-align: center;
padding: 10px;
border-radius: 6px;
font-family: 'Courier';
font-size: 12px;
position: absolute;
z-index: 1;
bottom: -300px;
left: 100%;
margin-left: 10px;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
display: table;
}
/**to display a small triangle*/
.tooltip .tooltiptext::before {
content: "";
position: absolute;
top: 55px;
left: -5px;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent rgba(76, 175, 80, 0.5) transparent transparent;
}
img.captcha {
display: none;
border: 1px solid black;
position: absolute; /* Change from relative to absolute */
bottom: 15px; /* Change from top:-46px; */
left: 15px; /* Change from 4px */
z-index: 3;
}
.tooltip:hover img.captcha {
display: block;
}
<a href="#" class="tooltip">
<div class=tooltiptext>
<table class="thumbnails">
<tr>
<td><img src="https://i.imgur.com/NdLpRzU.png" loading="lazy"></td>
<td><img src="https://i.imgur.com/UmyTAgY.png" loading="lazy"></td>
</tr>
</table>
<img class="captcha" src="data:image/gif;base64,R0lGODlhlgAoAPABAAAAAP///yH5BAAAAAAAIf8LSW1hZ2VNYWdpY2sOZ2FtbWE9MC40NTQ1NDUALAAAAACWACgAAAL+jI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTCPAXefVDXy8DpT8OsMgDxe0ITlLXbGY9PWMzQA0imVOE9esd1c1dLXH8sO8QdfG4/RW3OaGMXFXe55W1JVvzZ51h5fR93dQGHHoFhfYJ5KYeCbo8TR3tABpAYnZsElxhWfJ1wiiKelp6qYHWobTKYQqN3rh+qoqa4VGG3nLCYvoOxuGCZxJDMd7iuzHqvarTCcMoctXMn1M0qVsfY1tzLBteynt/U3++mx4ab7biAoOXu6p3s38Z81MP1G1jgLff4jPi79/Ab84M2iLX5KBCI0YQtcwIpeHEivqC2Uxo8YJjRw7evwI0kIBADs=">
</div>
Link text
</a>

Accordion (html and css only) works on Chrome but not on Edge & Mozilla

I'm working on a project and I use an accordion that I made with this website: https://accordionslider.com/
It works perfectly on Chrome but not on Firefox and edge, when I use my custom one I just have a gap between my navbar and the rest of my content. When I use the default one of the website I have a thin line in the middle of where it should be. You can test with the HTML/CSS of the website I provide
For information:
Mozilla Firefox : 73.0
Google Chrome : 80.0
Microsoft Edge : 44
And I'm working with Angular but I don't think it have any impact since it's a CSS/HTML problem
.accordion {
box-sizing: border-box;
display: flex;
font-family: Arial, Helvetica, sans-serif;
overflow: hidden;
width: 100%;
}
.accordion-select {
cursor: pointer;
margin: 0;
opacity: 0;
z-index: 1;
}
.accordion-title {
position: relative;
}
.accordion-title:not(:nth-last-child(2))::after {
border: 1px solid transparent;
bottom: 0;
content: '';
left: 0;
position: absolute;
right: 0;
top: 0;
}
.accordion-title span {
bottom: 0px;
box-sizing: border-box;
display: block;
position: absolute;
white-space: nowrap;
width: 100%;
}
.accordion-content {
box-sizing: border-box;
overflow: auto;
position: relative;
transition: margin 0.3s ease 0.1s;
}
.accordion-select:checked+.accordion-title+.accordion-content {
margin-bottom: 0;
margin-right: 0;
}
/* Generated styles starts here */
.accordion {
border-color: #dedede;
border-radius: 8px;
border-style: solid;
border-width: 1px;
flex-direction: column;
height: auto;
}
.accordion-title,
.accordion-select {
background-color: #ffffff;
color: #7f8787;
width: 100%;
height: 65px;
font-size: 15px;
}
.accordion-select {
margin-bottom: -65px;
margin-right: 0;
}
.accordion-title:not(:nth-last-child(2))::after {
border-bottom-color: rgb(234, 234, 234);
border-right-color: transparent;
}
.accordion-select:hover+.accordion-title,
.accordion-select:checked+.accordion-title {
background-color: #ffffff;
}
.accordion-title span {
transform: rotate(0deg);
-ms-writing-mode: lr-tb;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
padding-left: 33px;
padding-right: 33px;
line-height: 65px;
}
.accordion-content {
background-color: #f7f7f7;
color: #7f8787;
height: 280px;
margin-bottom: -280px;
margin-right: 0;
padding: 30px;
width: 100%;
}
<div class="accordion">
<input type="radio" name="select" class="accordion-select" checked />
<div class="accordion-title"><span>Title</span></div>
<div class="accordion-content">Content</div>
<input type="radio" name="select" class="accordion-select" />
<div class="accordion-title"><span>Title</span></div>
<div class="accordion-content">Content</div>
<input type="radio" name="select" class="accordion-select" />
<div class="accordion-title"><span>Title</span></div>
<div class="accordion-content">Content</div>
</div>
I tested your code with MS Edge, Google Chrome and Firefox browsers. Based on my testing results, I found that all 3 browsers are showing similar output. I am not able to find any difference or issue in output.
Here is my testing result:
If you are still facing the issue then I suggest you try to provide more information about it. We will again try to check for the issue.

Buttons losing functionality when positioned over background image

I am having the weirdest problem: I am working on a portfolio page with images that should link to the various projects. There are 6 of these in total. Each of the images has a button that should live on top of it. When the button is hovered on by the user, it changes color, the cursor changes, and a popup with a short description of the project opens. When the button is clicked, there is an event listener that redirects to the project's page.
The problem is that in 2 out of the 6 instances, the moment I position the buttons inside the image, the buttons lose all functionality (including the event listener). As far as I can tell the code governing these 2 instances is the same as the other 4 where there is no such problem.
code where it doesn't work:
HTML:
<div class="container" id="linkTwo">
<img src="assets/images/bonez2.jpg" alt="bonez" style="width:200px; height:200px;" class="linkpic" >
<div class="btn1"id="btn1">Bone's Beatz<span id="bonezPop"> */some text that pops up/* </span></div>
</div>
CSS:
#linkTwo {
position: absolute;
top: 100px;
left: 230px;
}
#linkTwo #btn1:hover {
background-color: black;
}
#btn1 {
position: absolute;
left:20px;
padding-left: 23px;
padding-right: 23px;
}
#btn1 #bonezPop {
visibility: hidden;
width: 250px;
background-color: #883043;
color: #aa9e9e;
text-align: center;
border-radius: 6px;
border-style: solid;
border-color: black;
border-width: 2px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
#btn1:hover #bonezPop {
visibility: visible;
}
.container #btn1 {
position: absolute;
top: -2px;
left: 20px;
font-size: 16px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 53px;
padding-right: 53px;
border: none;
cursor: pointer;
border-radius: 5px;
}
code that DOES work:
HTML:
<div class="container" id="linkFive">
<img src="assets/images/weather.jpg" alt="weather app" style="width:200px;height:200px;" class="linkpic">
<div class="btn3" id="btn3">Weather App<span id="weatherPop"> */some text that pops up */</span></div>
</div>
CSS:
#linkFive {
position: absolute;
top:320px;
}
#btn3 #weatherPop {
visibility: hidden;
width: 250px;
background-color: #883043;
color: #aa9e9e;
text-align: center;
border-radius: 6px;
border-style: solid;
border-color: black;
border-width: 2px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
#btn3:hover #weatherPop {
visibility: visible;
}
#btn3 {
padding-left: 53px;
padding-right: 53px;
}
.container .btn3 {
position: absolute;
top: -2px;
left: 20px;
font-size: 16px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 60px;
padding-right: 40px;
border: none;
cursor: pointer;
border-radius: 5px;
}
.container .btn3:hover {
background-color: black;
}
I realize this whole thing would have been done much more easily with WordPress or some such, but this is a class assignment that requires I do this with code.
Thanks!
Short gif of how the problem looks
Found the answer. It was a different CSS rule that was for some reason breaking it:
.container {
position: relative;
width: 50%;
}
commenting this out solved the problem.