IN VSCode, I used the Doxygen Generator Documentation plug-in to generate the following comments in a functional method. enter image description here
But when I hovered over the function, there was no newline in the function tip about brief enter image description here
This makes me very uncomfortable.This makes me very uncomfortable.
In addition,I'm not sure if Breif is the problem
Hope how to correct this phenomenon
I am trying to build searchlist for the searchbar and the list should be change color when cursor is placed their and got selected when clicked from list of item shown.
searchlist.jsx:
Login
import React from 'react'
import { FaSearch } from 'react-icons/fa';
import './SearchList.css';
function SearchList({TitleArray,setSearchQuery}) {
return (
<>
<div className="Container_SearchList">
{
TitleArray.map(m=>{
return <p
key={m}
onClick={e=>setSearchQuery(m)}
className='titleItem'>
<FaSearch/>
{m}
</p>
})
}
</div>
</>
)
}
export default SearchList;
searchlist.css:
.Container_SearchList {
background-color: white;
width: 90.75%;
position: absolute;
top:2.7rem;
height: fit-content;
z-index: 91;
}
.titleItem {
margin: 0;
padding: 0.5rem;
cursor: pointer;
}
.titleItem div p:hover {
background-color: rgba(166,202,234,0.516);
}
When cursor is placed on the name, the color should change and the name should get selected
how to make hoverable buttons DOWNLOAD and RESTART like in this link https://compress-pdf.obar.info/ Please, help. The buttons are really cool!
I tried this and nothing
`<style>
body{
margin: 0;
font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
letter-spacing: .1px;
font-size: 0.8125rem;
font-weight: 400;
line-height: 1.5;
}
a {
color: #2196f3;
text-decoration: none;
background-color: transparent;
}
.btn-lg, .btn-group-lg>.btn {
padding: 0.5rem 1rem;
font-size: 1.015625rem;
line-height: 1.5;
border-radius: 0.3rem;
}
.btn-success {
position: relative;
color: #fff;
background: #4caf50 -webkit-gradient(linear, left top, left bottom, from(#67bb6a), to(#4caf50)) repeat-x;
background: #4caf50 linear-gradient(180deg, #67bb6a, #4caf50) repeat-x;
border-color: #4caf50;
}
</style>
<a href="https://compress-pdf.obar.info/download/compresspdf" class="btn btn-lg btn-success"><i class="fa fa-cloud-download mr-1"></i>DOWNLOAD</a>`
`
I try to copy the code of the button, but it did not work.
After too many hours of frustration spent not understanding what was happening, a random idea to test seems to have confirmed the issue, but no idea how to properly resolve, and I'm truly not certain if this is a wordpress, css or even a theme caused issue (Avada theme). So a quick explanation:
Wordpress, Avada theme. Everything updated and patched. There is a menu on the site. There is a basic white color for the text, and hovering over a menu item changes the text color to orange and adds a border to the top and bottom. Nothing crazy. Just a little "animation" by setting a base state for the menu items (text white, background transparent, no border), and setting some different parameters for when it's hovered/active. I actually set the options in the avada builder, but also confirmed what was being applied with chrome dev tools. While in the builder back end after setting this, it works flawlessly. Hovering a menu item triggers the transition and moving off returns it to original state. If I visit the page normally however, all the menu items are already displaying and stuck in their hover state. From first moment it's visible it's already like that, and all the menu items are the same as if they were all being hovered. Hovering, clicking etc doesn't change the state. It acts like the hover/active properties are always active. Even trying to force change the element state in chrome dev tools doesn't change anything. If I go back into the live edit mode (which is still rendering the site as well), it's functioning perfectly.
I couldn't find much of anything hunting the forums. But a lucky break....I noticed that all the links in the menu were of anchor link variety. The kind that has ...com/#xxxxx in the url where clicking on it scrolls to a section or part of the same page instead of taking you to a unique page. The site was set as a one page. Using the avada Wedding demo site as a starting point. So I tested replacing a menu item with an anchor link url with any other link without the #xxxxx . Suddenly, it works perfectly again. Any of the anchor link items will still be stuck in that hover state appearence, but any item not using an anchor link looks and works fine even when the menu is a mix of both.
So the dillema. The page is all on one page, so the menu items need to use the anchor style. I'm not certain why anchor link seems to be be stuck on hover/active. I had wondered if it's just technically always active by the way it works which would explain this. Any thoughts?
Menu items with anchor link urls don't change between regular or hover/active state
On my site built with Prestahsop, to display a second product image on mouse hover, I use the three files described in the link below: https://gist.github.com/kpodemski/6422098 The method allows you to display, on mouse hover, the image located in the database in position 2.
But I would like to be able to display when hovering over the first image, the series of all the images of a product: image in position 2, then image in position 3, etc,... My products each have between 1 and 10 images.
I am not a developer and my knowledge of php and javascript is very limited.
Would you know how to modify the code of the three files, to display all the images of a product on mouse hover ?
Thank you in advance for any reply.
Patrick
I'm having issues trying to make an image {image 16} appear when hovering on another image with a link {image 15}. I'm building my website on Cargo, as I don't know much about coding. This site-builder is limiting my options to only place my images in grids, and as these grids already have a div class each, i can't get Cargo to accept the div classes im making for each image- probably because i'm doing it wrong. To top it all off, Cargo doesn't allow me to see all of the HTML, just specific parts. Any help would be super welcomed, thank you in advance!
HTML:
<div class="image-gallery" gid="21">
<div class="hover-image">{image 16}</div>
</div> <br>
<br><br>
<br>
<div grid-row="" grid-pad="0" grid-gutter="0" grid-responsive="">
<div grid-col="x12" grid-pad="0"></div>
</div><br>
<div grid-row="" grid-pad="0" grid-gutter="0" grid-responsive="">
<div grid-col="x12" grid-pad="0"><div style="text-align: left"><div class="image-gallery" gid="22">
<div class="hover-title">
<a rel="history" href="enlightened-type" class="image-link">{image 15}</a>
</div>
{image 5}
{image 13}
{image 14}
{image 12}
{image 11}
</div><br></div>
</div>
</div>
<br><div class="image-gallery" gid="23">
{image 17}
</div>2
CSS:
.hover-title {
display: inline;
pointer-events: auto;
cursor: pointer;
}
.hover-image {
visibility: hidden;
}
body:not(.mobile) .hover-title:hover + .hover-image {
visibility: visible;
pointer-events: none;
}
.hover-image {
display: flex;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
pointer-events: none;
flex-direction: column;
align-items: center;
justify-content: center;
/* Change width and height to scale images */
width: 90vw;
height: 90vh;
}
.hover-image img {
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
margin-bottom: 0;
}
I have icons for my socials in black and white with :hover pseudo selectors to change them to the full colour equivalents which caused the expected flickering, the code for these is as follows:
.header-main-socials {
width: fit-content;
height: 100%;
padding-right: 60px;
display: flex;
align-items: center;
column-gap: 10px;
}
.socials_icons {
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-size: cover;
}
#fb_icon {
background-image: url(../images/social-icons/facebook-bw.png);
}
#fb_icon:hover {
background-image: url(../images/social-icons/facebook.png);
}
#ig_icon {
background-image: url(../images/social-icons/instagram-bw.png);
}
#ig_icon:hover {
background-image: url(../images/social-icons/instagram.png);
}
I tried to stop the flickering using body:after and adding then hiding the content to preload however the flickering persists and if I remove the code to hide the content it still does not show up. Ctrl clicking on the url links takes me to the correct images and I am certain that the path is correct. I have tried with and without quotations within the url bracket with no luck. What am I doing wrong?
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: rgb(48, 48, 48);
}
body:after {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
z-index: -1;
content: url(../images/social-icons/facebook.png) url(../images/social-icons/instagram.png);
}
EDIT: unsure if it is relevant for a task like this but I am using a reset style sheet, it's fairly long so I will provide a link to it's github instead of copy-pasting the entire thing: https://github.com/elad2412/the-new-css-reset
My html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<title>T</title>
<link rel="stylesheet" href="styles/reset.css">
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/home.css">
</head>
<body>
<header id="header-main">
<div id="header-main-logo">
<img src="images/trlogocustom.png" alt="TRLogo" id="logo_nav">
<nav id="header-main-nav">
<ul>
<li><a href="index.html" id="home_nav" class="active">Home</a></li>
<li><a href="ourpeople.html" id="people_nav">Our People</a></li>
<li><a href="contact.html" id="contact_nav">Contact Us</a></li>
<li><a href="about.html" id="about_nav">About Us</a></li>
</ul>
</nav>
</div>
<div class="header-main-socials">
<a href="https://www.facebook.com" target="_blank"><div class="socials_icons" id="fb_icon"></div></a>
<a href="https://www.instagram.com" target="_blank"><div class="socials_icons" id="ig_icon"></div></a>
</div>
</header>
<main>
<h1>home page</h1>
</main>
<footer>
</footer>
</body>
</html>
I would like to remove the popup tooltip when hovering over certain images (not all) on my site. Is there a way to accomplish this through CSS? If not, what's the easiest way?
I have images in the typical format:
<img src="source.jpg" class="noTooltip" alt="My Alt" title="My Title" />
I can't remove the alt or title from the tag because they're needed in other places.
Thanks! Brendan
