Can't hover on link

HTML & CSS
1

Just noticing that when I hover over the .work element, it won’t do anything. I wonder if it has do to with either the speech bubble hover or the fact that the .blurred is blocking it. I don’t know :

.work {
    z-index:4;
    font-family:Open Sans, Arial, Verdana, Segoe UI;
    font-style:italic !important;
    position:absolute;
    top:60px;
    left:6.5px;
    font-size:16px;
    width:150px;
    color:#ffa87d;
    transition: transform .5s; /* Animation */
    transition:all .5s ease-in-out;
}

.work:hover {
    z-index:4;
    font-family:Open Sans, Arial, Verdana, Segoe UI;
    font-style:italic !important;
    position:absolute;
    top:60px;
    left:6.5px;
    font-size:16px;
    width:150px;
    color:white;
    transition: transform .5s; /* Animation */
    transition:all .5s ease-in-out;
    text-shadow:0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black, 0px 0px 1px black, 6px 0px 12px #7a2312, -6px 0px 12px #7a2312;
}
.quoteandpic {
    position:absolute;
    top:445px;
    left:10px;
    z-index:-1;
    width:365px;
    height:200px;
    background:rgba(0, 0, 0, 0.7);
    border-top:0px ridge #ccc;
    border-bottom:0px ridge #ccc;
    box-shadow: inset 0px 15px 8px -10px #1a0430, inset 0px -12px 8px -10px #1a0430;
}

.blurred {
  position:absolute;
  top:445px;
  left:10px;
  z-index:2;
  background-image: repeating-linear-gradient(132deg, transparent 12%, transparent 60%, rgba(153, 153, 153,.2) 70%, transparent 82%);
  border: 0px solid rgba(255,255,255,1);
  box-shadow: 0 20px 50px -10px rgba(0,0,0,.5);
  box-shadow: inset 1px 1px 0px rgba(155,155,155,0.3),
						inset 0px 0px 10px rgba(155,155,155,0.2),
						0px 1px 2px rgba(0,0,0,0.3),
						-5px 5px 15px rgba(0,0,0,0.3);
  height:200px;
  width:365px;
}

.speech {
  margin-left:100px;
  margin-top:255px;
  width: 65px;
  min-width:135px;
  height: auto;
  line-height:100px;
  text-align: center;
  background-color: #fff;
  border: 4px solid #000;
  border-radius: 130px;
  -webkit-box-shadow: 2px 2px 4px #888;
  -moz-box-shadow: 2px 2px 4px #888;
  box-shadow: 2px 2px 4px #222;
  opacity:0;
  z-index:4;
  transition: transform 0.4s; /* Animation */
  transition:all 0.4s ease-in-out;
  font-size:21px;
  font-family:Arial, Open Sans, Segoe UI;
  filter:drop-shadow(2px 2px 4px #222);
  text-shadow:2px 1px 2px #009dff;

}

.speech:before,
.speech:after,
.speech p:after {
  content: "";
  bottom: -25px;
  right: 70px;
  position: absolute;
  display: block;
  width: 38px;
  height: 26px;
  border-radius:0 0 18px 38px;
  box-shadow: 14px 14px 0px 11px #fff;
  transform: rotate(-90deg);
  z-index: -1;
}

/* Can use this first CSS to make speech bubble tail 3D */

.speech:before {
  box-shadow: 14px 14px 0px 14px #000;
  z-index: -1;
  right: 73px;
}
.speech:after {
  box-shadow: 14px 14px 0px 14px #000;
  z-index: -1;
}

.speech p {
  display: flex;
  justify-content: center;
  align-items: center;
  color: blue;
  font-size:25px;
  font-family:Segoe UI, Arial, Verdana, Georgia;
  z-index: 3;
  margin: 0;
  position: relative;
  min-height: 60px;
  padding: 10px;
  background:white;
  border-radius:130px;
}

.myDIV:hover+.speech {
  opacity:1;
  color: black; 
}
2

We’ll need to see the html as css on its own does nothing :slight_smile:

1 Like
3

@PaulOB :slightly_smiling_face:

4

@PaulOB I take it back. I just remembered that I had fixed it up.

2 Likes
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.