It sometimes happens to me that when I set position of some element (top: , right: and ...) some of my links will disable and when I put my mouse on it, The hand sign doesn't appear. I want to know why It happens and how can I improve that.
This is my page: [Google link is disabled.]
Can anyone explain my error and solve the problem?
My CSS Code:
#second_imglist {
position: relative;
right: -100px;
}
#squares {
position: absolute;
top: 630px;
right: 400px;
}
#imgset {
position: relative;
top: 30px;
}
Some HTML codes I think they create the problem:
<div class="w3-half">
<div data-ng-include="'variables/logo1.html'"></div>
<div class="w3-row w3-margin-top" id="imgset">
<div data-ng-include src="file"></div>
</div>
</div>
<div class="w3-half w3-center" id="img_controllers">
<div data-ng-include src="includehtml"></div>
</div>
</div>
<div class="w3-center" id="squares">
Google
<i class="fa fa-square" data-ng-click="nextslide(1)"></i>
<i class="fa fa-square-o" data-ng-click=""></i>
</div>
the i tags not inside of the a tag, so that's why hand cursor is not appearing...
and u can try adding cursor: pointer;to your i tags in css
i {
cursor: pointer;
}
should work.
Related
I have an image with a font awesome overlay of a plus. When I hover over the image (a tag) I want to display the plus, but I'm not sure if I have the correct css. The plus doesn't show when I hover over it!
Here is my code
a.registerTeacherAsHost:hover {
cursor: pointer !important;
opacity: 0.4;
}
a.registerTeacherAsHost:hover > .addTeacher {
display: normal;
}
<a class="registerTeacherAsHost" data-event-id=#Model.SpaceEvent.YogaSpaceEventId>
<div class="thumbnail">
<div>
<img class="img-responsive" src="~/Images/User_small_compressed_blue.png" style="position: relative; left: 0; top: 0;" alt="no teacher">
<i style="display:none; z-index: 200; position: absolute; top: 35%; right: 42%; color: grey;" class="addTeacher fa fa-plus fa-2x"></i>
</div>
</div>
</a>
Your CSS should look like this
a.registerTeacherAsHost:hover {
cursor: pointer !important;
opacity: 0.4;
}
a.registerTeacherAsHost .addTeacher { display: none; }
a.registerTeacherAsHost:hover .addTeacher {
display: block;
}
And the HTML
<a class="registerTeacherAsHost" data-event-id=#Model.SpaceEvent.YogaSpaceEventId>
<div class="thumbnail">
<div>
<img class="img-responsive" src="~/Images/User_small_compressed_blue.png" style="position: relative; left: 0; top: 0;" alt="no teacher">
<i style="z-index: 200; position: absolute; top: 35%; right: 42%; color: grey;" class="addTeacher fa fa-plus fa-2x">asd</i>
</div>
</div>
</a>
There were three problems with your code,
You were using the ">" selector which will only select the child element (.addTeacher) which is right after the parent element (.registerTeacherAsHost) which in you case doesn't work.
Other than that, the problem was with HTML where you declared the CSS for .addTeacher in the style tag, browsers take the CSS in this tag into consideration over any other stylesheets. One thing that could've worked was adding an !important to a.registerTeacherAsHost:hover .addTeacher { display: block !important; }. But it's better to write styles in a stylesheet and avoid using the !important as much as possible.
Next thing was, you were using display: normal which I've never heard of before and I think the browser hasn't too. display: block does the job.
Here's a fiddle: https://jsfiddle.net/5ncprd90/
Hope it helps!
There's been plenty wrong with your CSS which has been discussed already. I am focusing on a quick solution which goes here. Some adjustments have been made in the HTML structure and you are advised to avoid inline CSS. Hope this is what you are looking for.
a.registerTeacherAsHost{
display:inline-block;
}
a.registerTeacherAsHost:hover .thumbnail img {
cursor: pointer !important;
opacity: 0.4;
}
a.registerTeacherAsHost:hover i.addTeacher {
display: block;
cursor: pointer !important;
}
.thumbnail{
position:relative;
max-width:100%;
}
i.addTeacher{
display:none;
z-index: 200;
position: absolute;
top: 35%;
right: 42%;
color: grey;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a class="registerTeacherAsHost" data-event-id=#Model.SpaceEvent.YogaSpaceEventId>
<div class="thumbnail">
<img class="img-responsive" src="https://www.shareicon.net/data/128x128/2015/09/24/106425_man_512x512.png" alt="no teacher">
<i class="addTeacher fa fa-plus fa-2x"></i>
</div>
</a>
I have a image when hovered should show a small pencil icon to change upload new image. I am new to css, I have set the visibility of the icon to hidden by default. But when i change the visibility on hover to visible. It doesn;t show up.
<div class="col-lg-3">
<img id = "personal_profile_pic" src = "https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg">
<a href="#">
<span id="upload_pic_icon">
<label for="avatar" id="avatar_label">
<i class="fa fa-pencil" aria-hidden="true"></i>
</label>
</span>
</a>
<form id="change_pic_form">
<input type="file" name="avatar" id="avatar">
</form>
</img>
</div>
Here is my css
#upload_pic_icon{
margin-left: 62%;
margin-top: -25%;
display: block;
position: absolute;
visibility: hidden;
}
#personal_profile_pic:hover #upload_pic_icon{
visibility: visible;
}
I don't understand how to go about this.
You need to use + selector , it will select #upload_pic_icon that are placed immediately after #personal_profile_pic
#upload_pic_icon{
margin-left: 62%;
margin-top: -25%;
display: block;
position: absolute;
visibility: hidden;
}
#personal_profile_pic:hover + #upload_pic_icon {
visibility: visible;
}
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<div class="col-lg-3">
<img width="200" id="personal_profile_pic" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg">
<a href="#" id="upload_pic_icon">
<span>
<label for="avatar" id="avatar_label">
<i class="fa fa-pencil" aria-hidden="true"></i>
</label>
</span>
</a>
<form id="change_pic_form">
<input type="file" name="avatar" id="avatar">
</form>
</div>
Or you can wrap img and edit in div and the set hover on .wrap, and use display:none instead.
.wrap {
position: relative;
display: inline-block;
}
.wrap #upload_pic_icon {
display: none;
position: absolute;
top: 10px;
right: 10px;
}
.wrap:hover #upload_pic_icon {
display: block;
}
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<div class="col-lg-3">
<div class=wrap>
<img width="200" id="personal_profile_pic" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg">
<a href="#" id="upload_pic_icon">
<label class="fa fa-pencil" for="avatar" id="avatar_label">
</label>
</a>
</div>
<form id="change_pic_form">
<input type="file" name="avatar" id="avatar">
</form>
</div>
You shouldn't be wrapping html content inside an <img> tag, it's not syntatically correct.
Place all your content after the image tag, and trigger the css on hover using + selector. Use opacity instead of visibility as well for smoother transitions.
HTML:
<div class="col-lg-3">
<img id="personal_profile_pic" src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg"/>
<a href="#">
<span id="upload_pic_icon">
<label for="avatar" id="avatar_label">
<i class="fa fa-pencil" aria-hidden="true"></i>
</label>
</span>
</a>
<form id="change_pic_form">
<input type="file" name="avatar" id="avatar">
</form>
</div>
CSS:
#upload_pic_icon {
opacity: 0;
}
#personal_profile_pic:hover + #upload_pic_icon {
opacity: 1;
}
Try changing opacity from a very small value which the img could be considered invisible to fully visible (1.0). But your logic is likely wrong as there is no sense to hover something previously invisible.
#upload_pic_icon{
margin-left: 62%;
margin-top: -25%;
display: block;
position: absolute;
opacity: 0.000001;
}
#personal_profile_pic:hover #upload_pic_icon{
opacity: 1;
}
Very Simple Here is the Solution
https://jsfiddle.net/dineshkanivu/uddv4y9z/
HTML
<div class="MyImage">
<div class="penLayer">
<img src="https://cdn2.iconfinder.com/data/icons/snipicons/500/pencil-128.png"/>
</div>
</div>
CSS
.MyImage{
background: url("http://gretchenrubin.com/wp-content/uploads/2013/09/big_small_.jpg");
width: 350px;
height: 263px;
position:relative
}
.penLayer{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,0.8);
display:none;
}
.penLayer img{width:60px;
height:60px;
position:absolute;
left:50%;
top:50%;
margin-top:-30px;
margin-left:-30px}
I have few elements, 2 i and 1 input.
The layout I using w3-col from a frameworks called w3.css, and a font icon library called FontAwesome.
Since s7 + s5 = s12, why my elements still drop to the new row?
The 3 elements in div s5 expected should be in the same line.
Hope you guys can help me on this.
<div class="w3-row w3-section">
<div class="w3-col s7">
<label><b>Apple</b></label>
</div>
<div class="w3-col s5">
<i id="plus" class="fa fa-plus" style="font-size:24px"></i>
<input id="noOfApple" class="w3-input w3-border-0" type="text" name="noOfApple" value="1" size="3">
<i id="minus" class="fa fa-minus" style="font-size:24px"></i>
</div>
</div>
w3.css doesnt currently support "input-group"s. I use the term input groups, because this is the term that Twitter Bootstrap uses to refer to what you're looking for. What we can do, is examine the Bootstrap input-group code, and extend w3.css's code to include similarly prefixed versions. Unfortunately, w3.css uses the class w3-input-group already, so we will use w3-inline-input-group.
HTML
<div class="w3-row w3-section">
<div class="w3-col s7">
<label><b>Apple</b></label>
</div>
<div class="w3-col s5 w3-inline-input-group">
<i id="plus" class="fa fa-plus w3-input-group-addon"></i>
<input id="noOfApple" class="w3-input w3-border-0" type="text" name="noOfApple" value="1" size="3">
<i id="minus" class="fa fa-minus w3-input-group-addon"></i>
</div>
</div>
CSS
.w3-inline-input-group {
position: relative;
display: table;
border-collapse: separate;
}
.w3-inline-input-group .w3-input {
position: relative;
z-index: 2;
float: left;
width: 100%;
margin-bottom: 0;
}
.w3-inline-input-group .w3-input:focus {
z-index: 3;
}
.w3-input-group-addon,
.w3-inline-input-group .w3-input {
display: table-cell;
}
.w3-input-group-addon
{
width: 1%;
white-space: nowrap;
vertical-align: middle;
}
.w3-input-group-addon {
font-size: 24px;
font-weight: normal;
line-height: 1;
text-align: center;
}
JSFIDDLE
NOTE: JsFiddle doesnt allow inclusion of non-https external files, so please scroll to the BOTTOM of the css pane to find the new/above css
PS. If you havent come too far in your project, and you're going to be working with form elements a lot, I would strongly suggest looking into the Twitter Bootstrap CSS framework (you can customise an export of the library, to exclude all JS if you want to build all your own stuff, but again, they have a lot of very useful out-of-the-box code that I would recommend). It's a great place to start, and is far more widely used that w3.css (at least in terms of jobs asking for a knowledge of it)
Markup you had written is correct.
Your own code might be overwriting s7 and s5 class property float: left;
If you found it's overwriting then correct this.
Also add this style for input component
`.s5 {
position: relative;
}
.s5 input {
padding: 8px 15px;
}
.s5 i {
z-index: 1;
}
.s5 #plus {
position: absolute;
left: 0;
top: 5px
}
.s5 #minus {
position: absolute;
right: 0;
top: 8px
}`
Here is live example of your code :)
http://codepen.io/kaushik/pen/JERMwg
i used this below css
.fileContainer [type=file] {
cursor: inherit;
display: block;
font-size: 999px;
filter: alpha(opacity=0);
min-height: 100%;
min-width: 100%;
opacity: 0;
position: absolute;
right: 0;
text-align: right;
top: 0;
}
for my html
<div class=" btn btn-primary fileContainer">
<div class="input-group">
<i class="fa fa-paperclip fa-inverse"></i> Attachment
<input type="file" ngf-select ngf-multiple="true"
ng-model="noteListData.files" name="files">
</i>
</div>
</div>
using this css i am not able to see that text .
help me out.
i want to display button as well as text also.
thank you
It turns out should be the attribute "opacity" instead of "filter". Try to set the "opacity" to 1.
I found a way to make my own custom file upload control , by placing a fake control over it, and when i click the fake one , i am actually cliking the real control below.
Anyways the image for the browse button is a little to the top.
How can i lower it down a little?
Here is the js fiddle.
JsFiddle
Here is the html and css:
<div>
<div class="fileinputs">
<input type="file" class="file" />
<div class="fakefile">
<input />
<img src="search.jpg" />
</div>
</div>
</div>
div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.file {
position: relative;
text-align: right;
-moz-opacity:0;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
I believe this is what you are looking for. jsFiddle
CSS
.moveimage
{
position: relative;
top: 3px;
}
Modified HTML
<img class="moveimage" src="search.jpg" />