Hover color on ContextMenu

How do i change the hover color used on a menu item in a ContextMenu using setStyle() or getStyleClass().add()
Actually I'd like to remove / switch off the hover color. I suppose this would be done by making the hover color the same as the normal background color or is there another / better way ?
Thanks.

Mmmm, so i tried this with mixed results ?
.nohover:hover { -fx-background-color: transparent; }
menuitem.setStyleClass("nohover");The above indeed produces the desired effect when the mouse is ON the menu item then the default caspian blue is not visible.
However ContextMenu has a thin "border" and when the mouse crosses that border area then the menu item highlights in blue ?!
Trying the above code on the ContextMenu makes it become transparent - so then the menu item hangs in the air.
So I tried -fx-base and -fx-background instead of transparent but the blue highlight persists !?
Any ideas anybody ?

Similar Messages

Spry Menu Text only displays in hover color, doesn't sense browser edge

I have a Spry horizontal menu in a website that is working fairly well in everything except IE6. Firefox, Safari, and IE7 are all fine.
In IE6, random menu items only display in the blue hover color, so they are invisible until you hover over them.
My second problem is that the menu is right-aligned, and the button on the far right has three submenus. I would like the second two submenus to automatically open to the left of the first submenu when opening to the right would cause them to be cut off by the edge of the browser window. How do I do this??
Here is my code (I've customized it with suggestions online, but just can't seem to fix the problem with IE6).
Thanks for any help, I'm really stuck!!
@charset "UTF-8";
/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
LAYOUT INFORMATION: describes box model, positioning, z-order
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 9pt;
cursor: default;
font-family: Helvetica, Arial, sans-serif;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
height: auto;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 12em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
/*ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a blue block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #0000ff;
color: #fff180;
text-decoration: none;
li.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #0000FF;
color: #FFF180;
text-decoration: none;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
/* Menu items that have mouse over or focus have a yellow background and blue text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #fff180;
color: #0000ff;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #fff180;
color: #0000FF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;
@media screen {
* html ul.MenuBarVertical ul {position: relative!important; float: left;
margin: -10px -1000px -1000px 80px; display: inline;}
* html ul.MenuBarVertical {position: static!important; }
*:first-child+html ul.MenuBarVertical ul {position: relative!important;
float: left; margin: -10px -1000px -1000px 80px;}
*:first-child+html ul.MenuBarVertical {position: static!important; }

If you want to see the website and menu in action, go to http://www.gwnetworks.com/playtri/index_new2.html
Thanks again!

Adobe Reader 9.0 - Disable Forms Highlight color show border hover color for fields for all user a

Hello.
I am installing Adobe Reader 9.0 onto a new windows xp corporate build for my company. We would like to have the Forms Preference "Highlight Color" Show border Hover Color for Fields checkbox unchecked by default for any user that logs onto the workstation. (All new WinXP profiles, and if possible, any existing profiles) Is there a registry entry that can be changed to ensure that this option is unchecked by default on our WinXP build?
Thank you.

bumping thread...
I have downloaded the Adobe Reader 9.0 Custom Wizard install creator tool, but it still appears that I will need to know what registry key to change/import into the installer for this preference to be disabled by default for all users of the workstation that Adobe Reader 9.x is installed onto.
Any and all help is greatly appreciated.
Thank you.

Dynamic text link hover color change.

I have some dynamic text in Flash and I have a link with the text. Is there a way I can change the hover color without CSS? Here is my code.
thanks.
data=EASTERN CANADIAN DISTRICT<br><a href='mailto:[email protected]'><font color="#51884B">Mike Linnen</font></a><br>905-430-0955<br>Cell: 905-409-7159

Disable the "Show border around text" option of your dynamic
text field.
Draw a rectangle with the color you want, & locate it
behind your dynamic text field.

Changing hover color for TabNavigator tabs

I was able to change the background color of selected tab to
Navy and the others to Medium Blue. The foreground color is set to
White. The default color for the hover seems to be black, so when I
pass over the selected tab you can not read the text.
How do you change the hover color?

Try setting the textRollOverColor of your selected tab style.

Mouse Hover Color in Horizontal Dropdown Navigation

Hi,
Mouse Hover color in the Horizontal Dropdown Navigation scheme is not changed even if you apply a different stylesheet. It remains the default blue. Is there a setting some where or it needs to be modified in the navigation scheme.
thanks
-Sachin

Sachin,
Are you talking about the mouse hover color for the dropdown menu entries? That stylesheet class is defined in a different stylesheet. Look in
<imageserver dir>\imageserver\plumtree\common\private\js\jsportalmenus\122846\styles\css\PTPMMenu.css.
The number might be different on your system. If you view the HTML source on a portalpage and search for PTPMMenu.css you will see the number your portal is using. The styleclasses you want to change in PTPMMenu.css are .PTPMMenuBody .hoverand .PTPMMenuBody .hover td. You might also need to change other classes with the highlight color depending on the type of entries you have in your menus.

Css link hover color not applied to last letter in safari

Im only seeing this in safari. Here is my site:
http://smartpeopletalkfast.co.uk/oo2/
If I click on the contact page its highlihgted as it should be. However if im not on the contact page and I hover over the contact link, the last bit of the 't' is not highlighted. How can I fix this?
Im assuming becuase its italic the last bit is outside of the div, and for some reason the hover color isnt shown. Ive tried applying both a:hover css aswell as li:hover a.
Thanks

I'm seeing it in FF 3.6.13 as well on the PC.
Validate your page either throuth DW or the W3C. For one thing, you've got div tags inside li tags. Don't split up your styling . . . add the italic styling to the main styline for the li tag.
If fixing the coding doesn't work, try adding some padding to the right of that container -- a couple of pixels ought to do it.

Text Hover Color

Is there simple HTML code I can insert into CS5 DW code so that one link on a page will be a different color when you hover over it?

This is the page I want to change the links on http://www.rugged-cctv.com/product-choices.shtml
If you look under each picture the category title of each image is a link in white and when I hover over it I want it to show up in red.
Here is the code for the first set of cells that have links in them.
</tr>
          <tr>
            <td align="center" valign="top"><a href="dvr-choices.shtml">Digital Video Recorder</a><br />
            <br />              <br /></td>
            <td align="center" valign="top"><a href="pre-packaged-systems.shtml">Security Packages<br /><br /></td>
            <td align="center" valign="top"><a href="infrared-choices.shtml">Infrared Cameras<br /><br /></td>
            <td align="center" valign="top"><a href="ptz-choices.shtml">PTZ Cameras<br /><br /></td>
            <td align="center" valign="top"><a href="domes-choices.shtml">Dome Cameras<br /><br /></td>
          </tr>
          <tr>
Our Graphics person got fired and I'm just trying to get a few things taken care of before we hire someone else. For this page I see two css files. product-pages.css and homepage-css.css
Which css file do I put the class in for the hover, and where do I insert the html in the code above so just these 5 links turn red on the hover?
Thanks for the help!

Hover color

I have a container which contains information in it. The whole container is hyperlinked. How can I do it so when someone hover's their mouse over the container, the entire container becomes a certain color?
Thanks

I'm in the process of getting some webspace. But here is the whole HTML and CSS if you can help using them.
HTML
<div id="container">
<div id="title">Title</div>
<div id="categories">
<div id="left_cat">Cats<br />
</div>
<div id="middle_cat">Dogs<br />
</div>
</div>
<br /><br />
<div id="assorted_listings">Assorted Listings</div>
<div id="listings">
<div id="container_3">
    <div id="feat-title">Title</div>
    <div id="feat-photo">Content for id "feat-photo" Goes Here</div>
    <div id="feat-info">Content for id "feat-info" Goes Here</div>
</div>
<div id="container_4">
    <div id="feat-title">Title</div>
    <div id="feat-photo">Content for id "feat-photo" Goes Here</div>
    <div id="feat-info">Content for id "feat-info" Goes Here</div>
</div>
<div id="container_5">
    <div id="feat-title">Title</div>
    <div id="feat-photo">Content for id "feat-photo" Goes Here</div>
    <div id="feat-info">Content for id "feat-info" Goes Here</div>
</div>
<div id="container_6">
    <div id="feat-title">Title</div>
    <div id="feat-photo">Content for id "feat-photo" Goes Here</div>
    <div id="feat-info">Content for id "feat-info" Goes Here</div>
</div>
</div>
</div>
CSS
@charset "UTF-8";
/* CSS Document */
#container {
width: 780px;
height: auto;
border-right-width: thin;
border-left-width: thin;
border-right-style: solid;
border-left-style: solid;
border-right-color: #EAEAEA;
border-left-color: #EAEAEA;
margin-right: auto;
margin-bottom: 1px;
margin-left: auto;
padding-right: 0px;
text-align: left;
padding-left: 0px;
#title {
width: 600px;
margin-left: 15px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 20px;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #EBEBEB;
#categories {
width: 400px;
height: auto;
margin-left: auto;
margin-right: auto;
padding-bottom: 50px;
padding-top: 30px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: small;
#left_cat {
width: 180px;
float: left;
#middle_cat {
width: 180px;
float: right;
#assorted_listings {
width: 600px;
margin-left: 40px;
margin-top: 10px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 18px;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #EBEBEB;
overflow: hidden;
#listings {
width: auto;
height: auto;
margin-left: 60px;
margin-top: 14px;
#container_3, #container_4, #container_5, #container_6 {
width: 575px;
height: 140px;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #F4F4F4;
#feat-title {
width: 400px;
margin-top: 6px;
margin-bottom: 8px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 16px;
#feat-photo {
width: 125px;
height: 95px;
border: thin solid #EAEAEA;
float: left;
#feat-info {
width: 275px;
height: 95px;
margin-right: 120px;
float: right;

Hover color for bullets

Here is what I want to do. I want to have a navigation list
that has about 15 links. Each page that these nav will go to will
have a different color scheme. I would like the bullet before the
text to come up a different color than the text hover. Right now I
have it set up that the text is white, the hover is grey. But I
want the bullet to be different...yellow, blue, red, all different
for each line. Can this be done?

here you go...
http://thepattysite.com/linkstyles3.cfm
Jo
"blondie265" <[email protected]> wrote in
message
news:ejg1km$l4o$[email protected]..
> Here is what I want to do. I want to have a navigation
list that has about
> 15
> links. Each page that these nav will go to will have a
different color
> scheme.
> I would like the bullet before the text to come up a
different color than
> the
> text hover. Right now I have it set up that the text is
white, the hover
> is
> grey. But I want the bullet to be different...yellow,
blue, red, all
> different
> for each line. Can this be done?
>

Hover color not changing

http://www.jdcdemo.com/seark/test.html
I alledgedly set up the style for the links to change background color on the top menu. For some reason which I have not been able to plumb, that ain't happenin' Can someone who knows more that I tell me where I went astray?
Thanks,
Joe

lol, here is yoru selector for hover:
#nav1 li a:hover {
It's empty!
E. Michael Brandt
www.divahtml.com
www.divahtml.com/products/scripts_dreamweaver_extensions.php
Standards-compliant scripts and Dreamweaver Extensions
www.valleywebdesigns.com/vwd_Vdw.asp
JustSo PictureWindow
JustSo PhotoAlbum, et alia

How can I make multi-colored links change their rollover or hover color?

I have made links with seperate colors using css, but the links with new colors have no hover property. I want these links to change color when the cursor hovers over them the same way the other links on my page do. I have tried making a new css rule for <hover> and tried writing the property into the css code but to no effect. I have searched the web and this forum for an answer and found notheing that works. Does anyone know how to give links with multiple colors a hover property that will make them change color? All of my other links change color as defined in the page properties, but the links with new color rules don't change color anymore. This is probably pretty basic. I'm new to DW, using CS6. If anyone can provide a step by step and show where the code should be inserted, this would be very helpful. Thank you in advance!

Basic HTML5 Layout with Multi-colored menu.
Copy & paste the code below into a new, blank document. SaveAs test.html.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Document</title>


<style>
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
body {
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-size: 62.50%;
    width: 900px;
    /**with width, this is centered**/
    margin: 20px auto;
    padding: 0;
    background: #CCC099;
    box-shadow: 3px 3px 12px #333;
    border-radius: 12px;
/**TEXT LINKS**/
a {
    text-decoration: none;
    font-weight: bold;
    color: #F63
a:visited { color: #F93 }
a:hover, a:active, a:focus { text-decoration: underline }
header {
    margin: 0;
    padding: 0;
    min-height: 100px;
    border-radius: 12px 12px 0 0;
    color: #FFF;
    background: url(http://lorempixel.com/output/abstract-q-c-1056-100-7.jpg) no-repeat;
/* Multi-colored Horizontal Drop-Menu */
nav {
    float: right;
    padding: 4px;
    text-align: center;
    background: rgba(0,0,0,0.3)
nav ul {
    margin: 0;
    padding: 0
nav li {
    list-style: none;
    font-size: 12px;
    float: left;
    text-align: center;
/**top level menu**/
nav li a {
    display: block;
    text-decoration: none;
    margin-right: 0; /* space between links */
    width: 10em; /* adjust as needed or use auto */
    padding: 8px;
    font-weight: bold;
    line-height: 1.50em;
    border-top: none;
    color: #000;
/**alternating background colors**/
nav li:nth-child(odd) > a { background: #CAD3D3 }
nav li:nth-child(even) > a { background: #FFCCCC }
/**top menu style on mouse over**/
nav li:hover > a {
    color: #FFF;
    background: #033D53;
/**sub-menu**/
nav li ul {
    display: none;
    text-align: center;
    margin: 0;
    padding: 0 1em;
    background: none;
/**sub-menu, help for older IE**/
nav li:hover ul, nav li.hover ul {
    display: block;
    position: absolute;
    padding: 0;
nav li:hover li, nav li.hover li { float: none; }
/**drop-menu style**/
nav li:hover li a, nav li.hover li a {
    width: 10em; /* adjust width as needed or use auto */
    margin-top: 0;
/**drop-menu style on mouse over**/
nav li li a:hover {
    background: #D3E1B7;
    color: #004A43;
/* Clear floated elements at the end*/
nav:after {
    display: table;
    content: '';
    clear: both;
/**END DROP-MENUS STYLES**/
article {
    background: #FFC;
    padding: 3%;
    font-size: 125%;
/**3-COLUMNS**/
section {
    float: left;
    width: 33.33%;
    padding: 1%;
    background: #EAEAEA;
    min-height: 250px;
/**alternating background-colors**/
section:nth-child(even) { background: #DADADA; }
footer {
    clear: left;
    color: #FFF;
    background: #033D53;
    font-size: small;
    font-weight: bold;
    text-align: center;
    padding: 1%;
    border-radius: 0 0 12px 12px;
/**text styles**/
p {
    margin: 0 0 1.5em 0;
    padding: 0;
    font-size: 1em;
/**header text**/
h1 {
    margin: 0;
    padding: 0.5em 1% 0;
h2 {
    margin: 0;
    padding: 0 1%;
    font-style: oblique
h3 {
    margin: 0;
    padding: 0;
    font-size: 1.5em;
    color: #09F;
</style>
</head>
<body>
<header> <h1>Site Name</h1> <h2>Some Pithy Slogan</h2>

<nav>
<ul>
<li><a href="#">ABOUT US ▼</a>
<ul>
<li><a href="#">Videos</a></li>
<li><a href="#">Newsletter</a></li>
</ul>
</li>
<li><a href="#">PRODUCTS ▼</a>
<ul>
<li><a href="#">Broken Glass</a></li>
<li><a href="#">Mosaic Tiles</a></li>
<li><a href="#">Adhesives</a></li>
<li><a href="#">Grout</a></li>
</ul>
</li>
<li><a href="#">ACCESSORIES ▼</a>
<ul>
<li><a href="#">Gloves</a></li>
<li><a href="#">Rubber Mallets</a></li>
<li><a href="#">Sponges</a></li>
<li><a href="#">Safety Glasses</a></li>
</ul>
</li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>

</header>
<article>
<h3>Main Content goes here...</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.</p>
</article>

<section> <h3>Heading 3</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.</p>
<ul>
<li><a href="#">some link</a></li>
<li><a href="#">some link</a></li>
<li><a href="#">some link</a></li>
</ul>
</section>
<section>
<h3>Heading 3</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi!
Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus.
Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus.
Aenean tristique enim ut ante dignissim. </p>
</section>
<section>
<h3>Heading 3</h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
</section>

<footer>
<address>
Company address . Phone . Fax
</address>
<small>© 2014 SiteName. All rights reserved</small>
<p> </p>
<p> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="Valid CSS!"> </a> <img src="http://www.w3.org/html/logo/badge/html5-badge-h-css3-semantics.png" height="31" alt="Valid HTML5"></p>
</footer>
</body>
</html>
Nancy O.

Accordion Hover Color Change Not Working

Hi,
http://www.seminolewellnessfeed.com/new_sem_well/WellnessHorseFeeds.html
http://www.seminolewellnessfeed.com/SpryAssets/SpryAccordion.css
I believe I've got the CSS right for my hover over the panel tab to turn to 999, but it's not - anybody gotta clue?
Thanks!!! ttt

Have a look at your mark-up
<div class="AccordionPanelTab style3">
<h4><strong> Seminole Wellness® Safe & Lite Pellet</strong></h4>
</div>
If you want to style the text for the tab do so using the following rules
.AccordionPanelTab {
    font-size: 1.1em;
    text-align: center;
    font-weight: bold;
and change your mark-up to
<div class="AccordionPanelTab">Seminole Wellness® Safe & Lite Pellet</div>
Also take note of what SnakEyez02 said.
I hope this helps.
Ben

Disabling on hover color for GridViewItem

What more should be added to:
<DataTemplate>
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="PointerOver"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</DataTemplate>
To GridView.ItemTemplate to prevent On hover effect?

Hi,
You'll need to edit the GridViewItem control template and turn off highlighting by removing the visual state and/or the visuals related to highlighting. Look for the "PointerOver" visual part and remove it and the animations that target it. Alternatively,
if you want all ListView/GridViews in your application to not have a hover then you can change the ListViewItemSelectedPointerOverBackgroundThemeBrush brush value to Transparent. See some codes below:
<Page.Resources>
<Style TargetType="GridViewItem" x:Key="GridViewItemExpanded" >
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Background" Value="Transparent"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="True"/>
<Setter Property="Margin" Value="0,0,2,2"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewItem">
<Border x:Name="OuterContainer">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>

<VisualState x:Name="Pressed">
<Storyboard>
<PointerDownThemeAnimation TargetName="ContentContainer" />
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOverPressed">
<Storyboard>
<PointerDownThemeAnimation TargetName="ContentContainer" />
<DoubleAnimation Storyboard.TargetName="PointerOverBorder"
Storyboard.TargetProperty="Opacity"
Duration="0"
To="1" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectionBackground"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedBorder"
Storyboard.TargetProperty="Stroke">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBorderThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedEarmark"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedPointerOverBackgroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="contentPresenter"
Storyboard.TargetProperty="Opacity"
Duration="0"
To="{ThemeResource ListViewItemDisabledThemeOpacity}" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisual" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="PointerFocused"/>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionHintStates">
<VisualState x:Name="VerticalSelectionHint">
<Storyboard>
<SwipeHintThemeAnimation TargetName="SelectionBackground" ToVerticalOffset="15" ToHorizontalOffset="0" />
<SwipeHintThemeAnimation TargetName="ContentBorder" ToVerticalOffset="15" ToHorizontalOffset="0" />
<SwipeHintThemeAnimation TargetName="SelectedBorder" ToVerticalOffset="15" ToHorizontalOffset="0" />
<SwipeHintThemeAnimation TargetName="SelectedCheckMark" ToVerticalOffset="15" ToHorizontalOffset="0" />
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="HintGlyph"
Storyboard.TargetProperty="Opacity"
Duration="0:0:0.500">
<DiscreteDoubleKeyFrame Value="0.5" KeyTime="0:0:0" />
<DiscreteDoubleKeyFrame Value="0" KeyTime="0:0:0.500" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="HorizontalSelectionHint">
<Storyboard>
<SwipeHintThemeAnimation TargetName="SelectionBackground" ToHorizontalOffset="-23" ToVerticalOffset="0" />
<SwipeHintThemeAnimation TargetName="ContentBorder" ToHorizontalOffset="-23" ToVerticalOffset="0" />
<SwipeHintThemeAnimation TargetName="SelectedBorder" ToHorizontalOffset="-23" ToVerticalOffset="0" />
<SwipeHintThemeAnimation TargetName="SelectedCheckMark" ToHorizontalOffset="-23" ToVerticalOffset="0" />
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="HintGlyph"
Storyboard.TargetProperty="Opacity"
Duration="0:0:0.500">
<DiscreteDoubleKeyFrame Value="0.5" KeyTime="0:0:0" />
<DiscreteDoubleKeyFrame Value="0" KeyTime="0:0:0.500" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="NoSelectionHint" />
<VisualStateGroup.Transitions>
<VisualTransition To="NoSelectionHint" GeneratedDuration="0:0:0.65"/>
</VisualStateGroup.Transitions>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselecting">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="HintGlyphBorder"
Storyboard.TargetProperty="Opacity"
Duration="0"
To="1" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unselected">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="HintGlyphBorder"
Storyboard.TargetProperty="Opacity"
Duration="0"
To="1" />
</Storyboard>
</VisualState>
<VisualState x:Name="UnselectedPointerOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="HintGlyphBorder"
Storyboard.TargetProperty="Opacity"
Duration="0"
To="1" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="UnselectedSwiping">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SelectingGlyph"
Storyboard.TargetProperty="Opacity"
Duration="0"
To="0.5" />
<DoubleAnimation Storyboard.TargetName="HintGlyphBorder"
Storyboard.TargetProperty="Opacity"
Duration="0"
To="1" />
</Storyboard>
</VisualState>
<VisualState x:Name="Selecting">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SelectionBackground"
Storyboard.TargetProperty="Opacity"
Duration="0"
To="1" />
<DoubleAnimation Storyboard.TargetName="SelectedBorder"
Storyboard.TargetProperty="Opacity"
Duration="0"
To="1" />
<DoubleAnimation Storyboard.TargetName="SelectingGlyph"
Storyboard.TargetProperty="Opacity"
Duration="0"
To="1" />
<DoubleAnimation Storyboard.TargetName="HintGlyphBorder"
Storyboard.TargetProperty="Opacity"
Duration="0"
To="1" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SelectionBackground"
Storyboard.TargetProperty="Opacity"
Duration="0"
To="1" />
<DoubleAnimation Storyboard.TargetName="SelectedBorder"
Storyboard.TargetProperty="Opacity"
Duration="0"
To="1" />
<DoubleAnimation Storyboard.TargetName="SelectedCheckMark"
Storyboard.TargetProperty="Opacity"
Duration="0"
To="1" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedSwiping">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SelectionBackground"
Storyboard.TargetProperty="Opacity"
Duration="0"
To="1" />
<DoubleAnimation Storyboard.TargetName="SelectedBorder"
Storyboard.TargetProperty="Opacity"
Duration="0"
To="1" />
<DoubleAnimation Storyboard.TargetName="SelectedCheckMark"
Storyboard.TargetProperty="Opacity"
Duration="0"
To="1" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SelectionBackground"
Storyboard.TargetProperty="Opacity"
Duration="0"
To="1" />
<DoubleAnimation Storyboard.TargetName="SelectedBorder"
Storyboard.TargetProperty="Opacity"
Duration="0"
To="1" />
<DoubleAnimation Storyboard.TargetName="SelectedCheckMark"
Storyboard.TargetProperty="Opacity"
Duration="0"
To="1" />
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="contentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ListViewItemSelectedForegroundThemeBrush}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DragStates">
<VisualState x:Name="NotDragging" />
<VisualState x:Name="Dragging">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="InnerDragContent"
Storyboard.TargetProperty="Opacity"
Duration="0"
To="{ThemeResource ListViewItemDragThemeOpacity}" />
<DragItemThemeAnimation TargetName="InnerDragContent" />
<FadeOutThemeAnimation TargetName="SelectedCheckMarkOuter" />
<FadeOutThemeAnimation TargetName="SelectedBorder" />
</Storyboard>
</VisualState>
<VisualState x:Name="DraggingTarget">
<Storyboard>
<DropTargetItemThemeAnimation TargetName="OuterContainer" />
</Storyboard>
</VisualState>
<VisualState x:Name="MultipleDraggingPrimary">
<Storyboard>

<DoubleAnimation Storyboard.TargetName="MultiArrangeOverlayBackground"
Storyboard.TargetProperty="Opacity"
Duration="0"
To="1" />
<DoubleAnimation Storyboard.TargetName="MultiArrangeOverlayText"
Storyboard.TargetProperty="Opacity"
Duration="0"
To="1" />
<DoubleAnimation Storyboard.TargetName="ContentBorder"
Storyboard.TargetProperty="Opacity"
Duration="0"
To="{ThemeResource ListViewItemDragThemeOpacity}" />
<FadeInThemeAnimation TargetName="MultiArrangeOverlayBackground" />
<FadeInThemeAnimation TargetName="MultiArrangeOverlayText" />
<DragItemThemeAnimation TargetName="ContentBorder" />
<FadeOutThemeAnimation TargetName="SelectionBackground" />
<FadeOutThemeAnimation TargetName="SelectedCheckMarkOuter" />
<FadeOutThemeAnimation TargetName="SelectedBorder" />
<FadeOutThemeAnimation TargetName="PointerOverBorder" />
</Storyboard>
</VisualState>
<VisualState x:Name="MultipleDraggingSecondary">
<Storyboard>
<FadeOutThemeAnimation TargetName="ContentContainer" />
</Storyboard>
</VisualState>
<VisualStateGroup.Transitions>
<VisualTransition To="NotDragging" GeneratedDuration="0:0:0.2"/>
</VisualStateGroup.Transitions>
</VisualStateGroup>
<VisualStateGroup x:Name="ReorderHintStates">
<VisualState x:Name="NoReorderHint"/>
<VisualState x:Name="BottomReorderHint">
<Storyboard>
<DragOverThemeAnimation TargetName="ReorderHintContent" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Direction="Bottom" />
</Storyboard>
</VisualState>
<VisualState x:Name="TopReorderHint">
<Storyboard>
<DragOverThemeAnimation TargetName="ReorderHintContent" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Direction="Top" />
</Storyboard>
</VisualState>
<VisualState x:Name="RightReorderHint">
<Storyboard>
<DragOverThemeAnimation TargetName="ReorderHintContent" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Direction="Right" />
</Storyboard>
</VisualState>
<VisualState x:Name="LeftReorderHint">
<Storyboard>
<DragOverThemeAnimation TargetName="ReorderHintContent" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Direction="Left" />
</Storyboard>
</VisualState>
<VisualStateGroup.Transitions>
<VisualTransition To="NoReorderHint" GeneratedDuration="0:0:0.2"/>
</VisualStateGroup.Transitions>
</VisualStateGroup>
<VisualStateGroup x:Name="DataVirtualizationStates">
<VisualState x:Name="DataAvailable"/>
<VisualState x:Name="DataPlaceholder">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextBlock"
Storyboard.TargetProperty="Visibility"
Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderRect"
Storyboard.TargetProperty="Visibility"
Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="ReorderHintContent" Background="Transparent">
<Path x:Name="SelectingGlyph" Opacity="0" Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{ThemeResource ListViewItemCheckSelectingThemeBrush}" Height="13" Stretch="Fill" Width="15" HorizontalAlignment="Right" Margin="0,9.5,9.5,0" VerticalAlignment="Top" FlowDirection="LeftToRight"/>
<Border x:Name="HintGlyphBorder"
Height="40"
Width="40"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Opacity="0"
Margin="4">
<Path x:Name="HintGlyph" Opacity="0" Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{ThemeResource ListViewItemCheckHintThemeBrush}" Height="13" Stretch="Fill" Width="15" HorizontalAlignment="Right" Margin="0,5.5,5.5,0" VerticalAlignment="Top" FlowDirection="LeftToRight"/>
</Border>
<Border x:Name="ContentContainer">

<Grid x:Name="InnerDragContent">
<Rectangle x:Name="PointerOverBorder"
IsHitTestVisible="False"
Opacity="0"
Fill="{ThemeResource ListViewItemPointerOverBackgroundThemeBrush}"
Margin="1" />
<Rectangle x:Name="FocusVisual"
IsHitTestVisible="False"
Opacity="0"
StrokeThickness="2"
Stroke="{ThemeResource ListViewItemFocusBorderThemeBrush}" />
<Rectangle x:Name="SelectionBackground"
Margin="4"
Fill="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
Opacity="0" />
<Border x:Name="ContentBorder"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Margin="4">
<Grid>
<ContentPresenter x:Name="contentPresenter"
ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}" />

<TextBlock x:Name="PlaceholderTextBlock"
Visibility="Collapsed"
Text="Xg"
Foreground="{x:Null}"
Margin="{TemplateBinding Padding}"
IsHitTestVisible="False"
AutomationProperties.AccessibilityView="Raw"/>
<Rectangle x:Name="PlaceholderRect"
Visibility="Collapsed"
Fill="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}"/>
<Rectangle x:Name="MultiArrangeOverlayBackground"
IsHitTestVisible="False"
Opacity="0"
Fill="{ThemeResource ListViewItemDragBackgroundThemeBrush}" />
</Grid>
</Border>
<Rectangle x:Name="SelectedBorder"
IsHitTestVisible="False"
Opacity="0"
Stroke="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}"
StrokeThickness="{ThemeResource GridViewItemSelectedBorderThemeThickness}"
Margin="4"/>
<Border x:Name="SelectedCheckMarkOuter"
IsHitTestVisible="False"
HorizontalAlignment="Right"
VerticalAlignment="Top"
Margin="4">
<Grid x:Name="SelectedCheckMark" Opacity="0" Height="40" Width="40">
<Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z" Fill="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" Stretch="Fill"/>
<Path Data="F1 M133.1,17.9 L137.2,13.2 L144.6,19.6 L156.4,5.8 L161.2,9.9 L145.6,28.4 z" Fill="{ThemeResource ListViewItemCheckThemeBrush}" Height="13" Stretch="Fill" Width="15" HorizontalAlignment="Right" Margin="0,5.5,5.5,0" VerticalAlignment="Top" FlowDirection="LeftToRight"/>
</Grid>
</Border>
<TextBlock x:Name="MultiArrangeOverlayText"
Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DragItemsCount}"
Foreground="{ThemeResource ListViewItemDragForegroundThemeBrush}"
FontFamily="{ThemeResource ContentControlThemeFontFamily}"
FontSize="26.667"
IsHitTestVisible="False"
Opacity="0"
TextWrapping="Wrap"
TextTrimming="WordEllipsis"
Margin="18,9,0,0"
AutomationProperties.AccessibilityView="Raw"/>
</Grid>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<GridView ItemsSource="{Binding}" Name="grid" ItemContainerStyle="{StaticResource GridViewItemExpanded}" >
<GridView.ItemsPanel>
<ItemsPanelTemplate >
<VirtualizingStackPanel></VirtualizingStackPanel>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Image Source="{Binding Image}" Height="200" Width="200"></Image>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid>
Best Wishes!
We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place. <br/> Click <a
href="http://support.microsoft.com/common/survey.aspx?showpage=1&scid=sw%3Ben%3B3559&theme=tech"> HERE</a> to participate the survey.

How do you change a link color or hover color???

Hello all,
So far OK
As other people have said...iweb is good for quick turn around for brochureware...
Still exploring...Good job Apple on version 1.0
-scott

Hi.
I forgot to post my WIP(work in progress)
http://web.mac.com/macrtist67/iWeb
-scott

Hover color on ContextMenu

Similar Messages

Maybe you are looking for